css box model recap

While spending some time to figure out the “intricacies” of box model, I made the following big discoveries:

1. Element width/height doesn’t refer to the total width/height of the element. It only controls the most inner “content box”, which is surrounded by padding. The total element dimension is controlled by width/height along with padding, border-width and margin.

2. Border doesn’t occupy either margin or padding area. So the rule “border: 20px;” will actually increase the totoal box element dimension by 20px both ways (x and y).

3. Background image will fill the area defined by “content box” (whose dimension controlled by width/height) and padding.

These discoveries are simply illustrated as below:

css box model

BTW, this doesn’t cover the way IE 5/6 in Win implements box model in quirks mode;)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: