CSS and XHTML: The Box Model #2

This post is straight from page 396 of the book, Head First HTML: With CSS and XHTML.

There Are No Dumb Questions

Q: It seems like knowing this box stuff would be important if I were someone creating the software for a Web browser, but how is this going to help me make better Web pages?

A: To go beyond simple Web pages that use the browser's default layout, you need to be able to control how elements sit on the page, as well as the relative position of other elements. To do that, you alter various aspects of each element's padding and margins. So to create interesting Web page designs, you definitely need to know something about the box model.

Q: What's the difference between padding and margin? They seem like the same thing.

A: The margin provides space between your element and other elements, while padding gives you extra space around your content. If you have a visual border, the padding is on the inside of the border and the margin on the outside. Think of padding as a part of the element, while the margin surrounds your element and buffers it from the things around it.

Q: I know they are all optional, but do you need to have padding to have a border or a margin?

A: No, they are all totally optional and don't rely on each other. So you can have a border and no padding, or a margin and no border, and so on.

Q: I'm not sure I get how elements get laid out and how margins fit into that.

A: Hold that thought. While you're going to see a little of how margins interact with other elements in this chapter, we'll get way into this topic in Chapter 11 when we talk about positioning. 

Q: So other than size, it sounds like I can't really style padding and margins?

A: That's basically right. Both are used to provide more visual space, and you can't give the padding or margin a direct color or any kind of decoration. But, because they are transparent, they will take on the color of any background colors or background images. One difference between padding and margins is that the element's background color (or background image) will extend under the padding, but not the margin. You'll see how this works in a bit.

Q: Is the size of the content area determined solely by the size of the content in it?

A: Browsers use a lot of different rules to determine the width and height of the content area, and we'll be looking at that more in-depth later. The short answer is that you can set the width and height yourself if you need control over the size of the element. 

 

If you want to learn more about padding, margins, and borders, wait for the next post. ;)