HTML and CSS Reference
In-Depth Information
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.
Search WWH ::

Custom Search