CSS display: inline-block – underused and underrated?

paul — Mon, 24 May 2010 13:55:30 +0000

What I basically wanted to do was to add an icon after a heading, that would always line-up next to the last word, regardless of the amount to text. For various reasons I was using a span element, to which I applied Mike Rundle’s Phark image replacement technique. However, in order for the span to obey any dimensions, it caould not be displayed inline. I started to think about how I would achieve this, and all my solutions were fairly longwinded for what would appear to be a pretty trivial task: that’s when I remembered the inline-block selector! Using this allowed me to give the span the desired dimensions, whilst allowing it to line-up against the text.

Unfortunately, this doesn’t work in IE6+7 or Firefox 2. But fear not, these can be addressed (at the expense of a stylesheet that no longer validates). Here is the code:

h3 span {
	width: 16px;
	height: 16px;
	overflow: hidden;
	text-indent: -9999em;
	background: url(/img/secure_lock_icon.png) no-repeat 0 0;
	display: -moz-inline-stack;	/* Get FF2 to play nicely */
        display: inline-block;	/* Modern browsers get this */
	vertical-align: top;

	/* these go in your IE specific stylesheet to make it play fairly as well */
	zoom: 1;
        display: inline;
}

Paul Bennett - User Interface Developer » inline-block

CSS display: inline-block – underused and underrated?