HTML and CSS Reference
In-Depth Information
single space is added to the
width
and horizontal
margin
values of all the elements in
the row, the total width becomes too great, pushing the last
<section>
element to a new
row. In order to display all of the
<section>
elements on the same row, the white space
between each
<section>
element must be removed.
Removing Spaces Between Inline-Block Elements
There are a number of ways to remove the space between inline-block elements, and some
are more complex than others. We are going to focus on two of the easiest ways, both of
which happen inside HTML.
The first solution is to put each new
<section>
element's opening tag on the same line
as the previous
<section>
element's closing tag. Rather than using a new line for each
element, we'll end and begin elements on the same line. Our HTML could look like this:
1.
<header>...</header>
2.
<section>
3.
...
4.
</section><section>
5.
...
6.
</section><section>
7.
...
8.
</section>
9.
<footer>...</footer>
Writing inline-block elements this way ensures that the space between inline-block ele-
ments within HTML doesn't exist; consequently, the space will not appear when the page
is rendered (see
Figure 5.9
)
.
Figure 5.9
A three-column page layout using inline-block elements with properly re-
moved white space
Search WWH ::
Custom Search