In CSS, inline-block elements are inline elements whose content is rendered as a block element. For that reason, inline-block elements accepts a width and a height and all other properties related to a block formatting context. Examples of these elements are some forms elements (input fields, select boxes, text areas), image elements, iframes and object. The fact of being connected to a block formatting context doesn't imply that these elements are rendered on a new line. On the contrary, they're actually displayed on the same line of surrounding text, just as other inline elements. So if you want to create a real block formatting context, you have to turn them into block-level elements by using the display property set to block.
A typical use case for these elements are emoticons and inline messages. For example, on form validation you can actually make these elements appear on the same line of other elements while giving them a width and a height. But there's a caveat concerning IE6 and 7: in this browser, unfortunately, the inline-block value is not supported. Anyway, you can mimic this behavior by using the proprietary zoom property set to 1.
