HTML and CSS Reference
In-Depth Information
Understanding the Difference between inline and inline-block
An important aspect of the box model as it applies to inline text elements is that margins and padding do not
affect the line height of the surrounding text unless you set the
display
property to
inline-block
. Horizontal
margins and padding increase the distance before and after the inline element, but the vertical distance remains
unchanged.
The text in display1.html in the ch06 folder contains two
<span>
elements. By default, browsers treat
<span>
elements as inline, but the
display
property of the second one is set to
inline-block
. The style rules add
margins and padding on all sides of both
<span>
elements and make the text bold like this:
span {
margin: 20px;
padding: 20px;
font-weight: bold;
}
#inline-block {
display: inline-block;
}
As Figure
6-11
shows, both
<span>
elements are surrounded by horizontal space, but only the one displayed
as an inline block affects the vertical space around it.
Figure 6-11.
Setting display to inline-block affects the line height of the surrounding text
The lack of vertical space around the first
<span>
gives the misleading impression that browsers ignore
vertical margins and padding applied to inline text. The styles in display2.html add a background color and
border to both
<span>
elements. As Figure
6-12
shows, the padding and border around the first
<span>
element
are rendered normally and overlap the text in the surrounding lines.
