Box Model

From CSS Discuss

Jump to: navigation, search

Understanding the CSS Box Model is essential to successful layouts. People can argue endlessly about whether the width of the box should be the total width of the whole thing, or just the width of the content. While we can disagree about what we would like it to be, the W3C wrote the spec and they say width is the width of the actual contents, and to that is added padding, then borders, then margins.

It helps to have illustrations. Here is a collection of illustrations that all say about the same thing, but offer different ways of visualizing the box model.

They will give you an interactive box model diagram of any element on a page. This is an invaluable tool for learning and debugging.

Now that you understand the model, go study why earlier versions of Internet Explorer use a different model, and what to do about it. See Box Model Hack .

Original by Bob Easton . Please feel welcome to update and extend.

Personal tools