Understanding the CSS Box Model - Beginning CSS3 - page 109

Figure 6-12. The vertical padding is still rendered on inline text elements

Examine display2.html closely (or compare Figures 6-11 and 6-12 ), and observe the following:

• The background and border of the inline

<span> obscures the preceding line.
The next line is displayed over the background and border of the inline •

<span> .

• The text in the inline

<span> wraps normally, splitting the box over multiple lines.
If you resize the browser window, the inline block is never split.

•

In other words, setting the display property to inline-block gives the element all the characteristics of a
block-level element, but displays it inline. You can verify this in display3.html, which adds the width , text-align ,
and vertical-align properties to the style rule applied to both <span> elements like this:
span {
margin: 20px;
padding: 20px;
font-weight: bold;
background-color: #FF9;
border: 1px solid #000;
width: 150px;
text-align: center;
vertical-align: top;
}

As Figure 6-13 shows, the inline <span> remains unaffected, whereas the inline block is a different
width with the text centered. Its position in relation to the surrounding text has also been affected by the
vertical-align property.