Physical width and width of content?

Question

I am learning CSS and I am having problems understanding the physical width and width of content. Sites seem to link to them without even explaining the difference.

I know this has something to do with the CSS box model, if anyone else can help me, it will be great.

For example, if css says the following:

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

What is included in the physical width? And what is the width of the content?

Answer 1

• "Width" refers to the content area; Think of it as your “inner” box.
• "Fill" is optionally added outside the content area. It could be 0.
• The “border” is optionally indented, if any.
• "Margin" is again added abroad, if any.

So, if you have a width of 400, indent on the left 20, right 10, edge 20 (10 on each side) and 4 border pixels (two on each side), your whole box will be 400+20+10+20+4=454px

So, if you tried to put this in a space with a width of only 400 pixels, you need to reduce something; you could, for example, reduce the width by 54 pixels to get a total total of 400.

---

Note that this does not apply to Quirks Mode, which uses a slightly different box model, as indicated in Sean's answer. This only applies to IE without a proper doctype; It is usually advisable to avoid the fad regime

Answer 2

It depends on the box model that the browser uses. Two possibilities are possible:

• content-box : element width excludes padding and border properties. This is the default model for all but IE in quirks mode.
• border-box : The width of the element includes indentation and border.

In newer browsers, you can choose which one to use with the box-sizing attribute.

Therefore, given the code provided in the content-box model, the width of the div will be:

  400 # from width + 20 # from padding-left + 10 # from padding-right + 4 # from the left and right borders + 20 # from the left and right margins ----------------------------------------- Physical width = 454 Content width = 400 

For now, the border-box model will set the width of the div to:

  366 # the declared width is shrunk by the amount of padding and border + 20 # from padding-left + 10 # from padding-right + 4 # from the left and right borders + 20 # from the left and right margins ----------------------------------------- Physical width = 420 Content width = 366 

For more information, see Quirk Mode's excellent related article .