Jump to content

Block element rendering


SmokingMan

Recommended Posts

Just a general question on how different browsers handle block elements. When you specify an element to be 800 pixels in width, with a 2 pixel border, is the border included in the 800 pixel width? For example, would the actual width inside the block for content would be 796 pixels since 4 pixels are taken up with the borders, or are the border widths added on to the block element leaving all 800 pixels for content? And does this vary between browsers?

Link to comment
Share on other sites

As far as i know it adds 4px to the width so it would be 802px. padding also adds the width.

Link to comment
Share on other sites

W3C defines the so called "box model" by which borders and margins are added to the total width of an element, while padding doesn't change the width, but it takes out from the content's width.So in your case, 800px width + 4px border = 804px width. To make things more complex, 800px width + 4px border + 4px margin and 100px padding = 808px width, 100px padding.IE6 however implements the so called "border model" by which the border is taken from the total width and only margin increases the width. Padding I think merges with the border, but I'm not sure of that.So in your case, 800px width - 4px border = 796px. To make things more complex, 800px width - 4px border + 4px margin and 100px padding = 804px width, 96px padding.IE7 uses the W3C box model, but only when in standart compilant mode. In other words, you must use the Strict DTD on your pages.

Link to comment
Share on other sites

So in your case, 800px width + 4px border = 804px width. To make things more complex, 800px width + 4px border + 4px margin and 100px padding = 808px width, 100px padding.IE6 however implements the so called "border model" by which the border is taken from the total width and only margin increases the width. Padding I think merges with the border, but I'm not sure of that.So in your case, 800px width - 4px border = 796px. To make things more complex, 800px width - 4px border + 4px margin and 100px padding = 804px width, 96px padding.IE7 uses the W3C box model, but only when in standart compilant mode. In other words, you must use the Strict DTD on your pages.
:) I think I have a headache. :) I code everything using XHTML Strict. I've never thought about this before, but for some reason I had this burning need to know. Thanks :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...