HTML, XHTML, and CSS Bible, Fifth 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 concentric areas that surround elements—also known as the box model.

The next chapter continues this discussion, covering colors and background images.

The CSS Box Formatting Model

Although not overtly 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, which shows a document that isn't overtly 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.

Figure 32.1. This Web document does not appear overly boxy in appearance.

All elements have a margin, padding, and border property. These properties control the space ...