I’ve been using display: inline-block more often in CSS lately. With the widely-accepted dropping of support for IE7 and below, we don’t have to worry about hacks to make it work properly anymore.
display: inline-block is useful for:
- Buttons
- Vertically aligning content without using tables or display:table-cell
- Layout as opposed to floats
As an example, here’s a thumbnail grid.
Advantages:
- No clearing to worry about as with floats
- Avoid extra markup to account for aligning thumbnails of varied heights
- Can vertically align elements top, middle or bottom relative to each other using the vertical-align property
- Can horizontally center the elements with text-align:center on the parent
Disadvantages:
- White-space. When you set an element to inline-block, it will usually pick up a trailing space that can interfere with your layout.
There are a few ways to fix the white-space problem, each with its own drawbacks.
- Leave no white-space in your code — take out all line-breaks and spaces around the affected elements. This isn’t great for code cleanness or readability, and future developers may add spaces and be confused.
- Use a negative margin to compensate for the extra space. The size of the margin varies because of different font space widths and users’ font settings may be different. In some cases, it doesn’t work well on retina displays.
- Make sure there is plenty of space in your container for the elements and that a few pixels more or less won’t throw off the design completely. (But really, does this ever happen?)
- Set font-size:0 on the parent and reset the font size for the child elements. You’ll have to add extra rules on child elements, and can’t use ems — rems would work.
