7.1. Understanding the Box ModelYou probably think of letters , words, and sentences when you think of a paragraph or headline. You also probably think of a photo, logo, or other picture when you think of the <img> tag. But a Web browser treats these (and all other) tags as little boxes . To a browser, any tag's a box with something inside ittext, an image, or even other tags containing other things, as illustrated in Figure 7-1. Surrounding the content are different properties that make up the box:
For a given tag, you can use any or all of these properties in combination. You can set just a margin for a tag, or add a border, margins, and padding. Or you can have a border and margin but no padding, and so on. If you don't adjust any of these properties, then you'll end up with the browser's default settings, which you may or may not like. For example, while browsers usually don't apply either padding or borders to any tags on a page, some tags like headings and paragraphs have a preset top and bottom margin. (Throughout this chapter you'll learn about these default settings as well as how to override them.) Figure 7-1. The CSS box model includes the content inside a tag (for example, several sentences of text) plus padding, borders, and margins. The area within the border, which includes the content and padding, may also have a background color. Actually, the background color is drawn underneath the border, so when you assign a dashed or dotted border, the background color appears in the gaps between the dots or dashes (Section 7.4). |