178 Part III: Adding Artistry: Design and Composition with CSS
This applies as well to the heightproperty, where you must take into
account padding, borders, and margins too.
Some designers temporarily add a background color to their elements to
enable them to more easily visualize the boxes (see Figure 9-9). But always
remember that a background does not include any margins, as you can see in
Figure 9-10. So simply adding a background doesn’t always make the virtual
box visible.
Positioning also involves concepts such as the autovalue and floating. These
and related issues are covered in upcoming chapters.
Breaking Up Text with Horizontal Lines ...................................................
For some reason, horizontal rules aren’t used as much in books and other
media as they once were. It’s a shame, in my view, because they’re both
attractive and functional.
Horizontal lines are often a quite effective way of separating different logical
areas of your Web page. They organize things visually for the reader in a way
that’s both unobtrusive and efficient. They can also improve the aesthetic
appearance by adding variety.
Readers appreciate it if you somehow visually break up a page that contains
a large amount of text. Headlines and subheads help to do this, as do borders
and background colors or textures. But one of the best ways to indicate that
a group of paragraphs belongs together logically is to simply insert horizon-
tal lines as needed.
Probably the easiest way to employ horizontal lines is to use the <hr>(hori-
zontal rule) element, like this:
<style>
hr {
margin-top:5px;
width: 80%;
height: 1px;
color: blue;
}
</style>
</head>
<body>
