HTML, XHTML, and CSS Bible, Fourth Edition

Chapter 32. Padding, Margins, and Borders

IN THIS CHAPTER

• The CSS box formatting model

• Element padding

• Element borders

• Element margins

• Dynamic outlines

All elements in an HTML document can be formatted in a variety of ways using CSS. Previous chapters in this part of the book covered the CSS basics — how to write a style definition and how to apply it to various elements within your documents. This chapter begins coverage of the area that surrounds elements and how it can be formatted, including customizing the space around an element and giving it a border.

The next chapter continues this discussion with colors and background images.

The CSS Box Formatting Model

Although not patently obvious, all elements in an HTML document are contained within a box. That box has several properties — margins, padding, and borders — that can be configured to help distinguish the enclosed element from nearby elements.

Take a look at Figure 32-1. This figure shows a document that isn't overly boxy.

The same document is shown in Figure 32-2, but a thin border has been added to every element courtesy of the following style:

* { border: thin solid black; }

Note how all the elements in the document pick up the border in a rectangular box shape. The border becomes much thicker at the intersection of two or more elements.

All elements have a margin, padding, and border property. These properties control the space around the element's contents and other elements around it. These properties stack around an element, as ...