Comprehending the CSS Box Model

Before you start stuffing content into boxes, take a bird’s-eye view of the CSS box model to see how boxes are constructed. As shown in Figure 16.1, boxes consist of the following six components:
Content: Whatever’s inside the box: headings, articles, sections, paragraphs, lists, graphics, video, you name it.
Border: Any line you choose to display around the box.
Background: The color or image (or lack thereof) behind the content.
Padding: Space between the content and border.
Margin: Space outside the box.
Outline: A border around the actual border used primarily to highlight an element.
338
Figure ...

Get The Complete Idiot's Guide® To HTML5 and CSS3 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.