Section 7.1. Understanding the Box Model


7.1. Understanding the Box Model

You 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:

  • Padding is the space between the content and the content's border. Padding is what separates a photo from the border that frames the photo.

  • Border is the line that's drawn around each edge of the box. You can have a border around all four sides, on just a single side, or any combination of sides.

  • Background- color fills the space inside the border, including the padding area.

  • Margin is what separates one tag from another. The space that commonly appears between the tops and bottoms of paragraphs of text on a Web page, for example, is the margin.

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).



CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net