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.