Cascading Style Sheets: The Definitive Guide, Second Edition

Chapter 8. Padding, Borders, and Margins

If you’re like the vast majority of web designers, your pages all use tables for layout. You design them this way because, of course, tables can be used to create sidebars and to set up a complicated structure for an entire page’s appearance. You might even use tables for simpler tasks, like putting text in a colored box with a border. When you think about it, though, you shouldn’t need a table for such simple tasks. If you want only a paragraph with a red border and a yellow background, shouldn’t creating it be easier than wrapping a single-cell table around it?

The authors of CSS felt it should, indeed, be easier, so they devoted a great deal of attention to allowing you to define borders for paragraphs, headings, divs, anchors, images—darned near everything a web page can contain. These borders can set an element apart from others, accentuate its appearance, mark certain kinds of data as having been changed, or any number of other things.

CSS also lets you define regions around an element that control how the border is placed in relation to the content and how close other elements can get to that border. Between the content of an element and its border, we find the padding of an element, and beyond the border, the margins. These properties affect how the entire document is laid out, of course, but more importantly, they very deeply affect the appearance of a given element.

Basic Element Boxes

As we discussed in Chapter 7, all document elements ...