Question

I am learning CSS and I am having trouble with the concept of the physical width and content width. Sites seem to refer to them, without ever truly explaining the difference.

I know it has to do with teh CSS box model, if anyone else could help me out that would be great.

For example if given the following in css:

div {
width: 400px;
padding-left: 20px;
padding-right: 10px;
margin: 0px 10px;
border: 2px solid pink;
}

What is encompassed into the physical width? And what in the content width?

Answer 1

• “Width” refers to the content area; think of it as the ‘inside’ of your box.
• “Padding” is extra, added on outside of the content area. It can be 0.
• “Border” is extra, outside of the padding, if any.
• “Margin” is extra again, outside of the border, if any.

So, if you have width 400, padding left 20, right 10, margin 20 (10 on each side), and 4 pixels of border (2 on each side), your whole box will be 400+20+10+20+4=454px

So, if you were trying to fit that into a space that is only 400 pixels wide, you need to reduce things somewhere; you could, for example, reduce the width by 54 pixels to make the resulting total 400.

---

Note that this does not apply to “Quirks Mode”, which uses a slightly different box model, as noted in Sean’s answer. This will only apply to IE without a proper doctype; it is generally desireable to avoid quirks mode.