Layout with CSS3 - HTML5 and CSS3 - page 274

inline-block also makes the behavior
of grids of items more consistent
when there are elements of different
sizes. Elements that are inline-block
are aligned with the normal
character grid, just like lines of
text on a page. In this screenshot,
you can see that the oversize
element forces the entire next
line down.
Being aligned with the normal char-
acter grid does present other issues.
Spacing is no longer entirely con-
trolled by margins. This code is from
ch08/layout-inline-4.html:
div {
margin: 0;
border: 4px dashed black;
display: inline-block;
}
You can see that despite the margin
being set to 0, there's still a gap
between the elements on each row.
This gap is due to letter and word
spacing. Elements that are
inline-block behave as if they're
letters or words. Setting negative
spacing removes the gap, as in
ch08/layout-inline-4a.html:
body {
letter-spacing: -0.4em;
word-spacing: -0.4em;
}