HTML and CSS Reference
In-Depth Information
Although you made the navigation links inline, you will shortly add
margin
properties to them, so instead make
them inline-block:
1.
In styles.css, change the display declaration of
#header nav > ul > li
to
display: inline-block;
2.
Save styles.css.
As you can see in Figure 9-8,
inline-block
elements are separated by 4 pixels, and although the width of the
navigation links isn't critical (there's plenty of room for the navigation links to stretch out), it's often easier to get rid
of these additional 4 pixels, especially when you know some elements are going to have quite a few different styles
applied to them.
Figure 9-8
The navigation links now being displayed as inline-block.
These 4 pixels aren't actually caused by the CSS but instead the white space in the HTML (the spaces that separate
the
<li>
elements).
1.
In index.html, find the unordered list in the header:
<nav role=”navigation”>
<ul>
...
</ul>
</nav>
2.
Remove any white space between the top level closing
</li>
and opening
<li>
elements, so
<li><a href=”#” title=”Return to the front page”>Home</a></li>
<li><a href=”#” title=”About Company Name”>About</a></li>
becomes
<li><a href=”#” title=”Return to the front
page”>Home</a></li><li><a href=”#” title=”About Company
Name”>About</a></li>
and so on. You should only need to remove three amounts of white space between four list items.
3.
Save index.html.
When you do this, the HTML that makes up the navigation links is a little more difficult to read but it at least re-
moves the 4 px of white space, as shown in Figure 9-9.
