HTML and CSS Reference
In-Depth Information
Inline-Block in Practice
Let's take a look at our three-column example from before. We'll start by keeping our
HTML just as it is:
1.
<header>...</header>
2.
<section>...</section>
3.
<section>...</section>
4.
<section>...</section>
5.
<footer>...</footer>
Now instead of floating our three
<section>
elements, we'll change their display values
to
inline-block
, leaving the
margin
and
width
properties from before alone. Our
resulting CSS will look like this:
1.
section {
2.
display: inline-block;
3.
margin: 0 1.5%;
4.
width: 30%;
5.
}
Figure 5.8
A three-column page layout using inline-block elements without removing
any unnecessary white space
Unfortunately, this code alone doesn't quite do the trick, and the last
<section>
element
is pushed to a new row. Remember, because inline-block elements are displayed on the
same line as one another, they include a single space between them. When the size of each
Search WWH ::
Custom Search