ansaurus

Question

Why does border affect the containing block size in CSS?

Answer 1

+2 A:

I understand that the height of a box in CSS is the height of the contents, excluding the margin and padding

Wrong: it includes padding and border (except in Microsoft Internet Explorer due to a bug and now for compatibility reasons (if using quirks mode rendering)). Read up on the CSS box model:

The content edge surrounds the rectangle given by the width and height of the box

where the content edge is the edge running around the outside of the border.

Konrad Rudolph 2010-06-30 12:51:35

@Konrad Rudolph, he did no set width and height to #container element thus sizes are useless.

eugeneK 2010-06-30 13:00:18

But why does the presence or absence of the border alone change the amount of background green that's visible above the first paragraph. I want to understand the why here - I'm not trying to achieve any particular result. Thanks!

2010-06-30 13:08:03

@aizuchi, you've got plenty of errors in CSS code. It's hard to tell why unless you fix an error. Box model ( the way browser calculate size of certain element ) is different for ie.6(and below) and other browsers. This means if you give specific width and height and then apply margin,padding an border each browser will render differently.Since you haven't provided us information about browser you use, we can't you help that much

eugeneK 2010-06-30 13:13:43

This is in Safari. Try it yourself - it's a very interesting result. What are the errors in this CSS code that you see?

2010-06-30 14:29:17

The behavior is the same in Firefox and Safari - I think this is standard behavior, I'm just trying to understand why. Thanks!

2010-06-30 14:34:30

@aizuchi, @eugene: I was merely commenting on the wrong premise. The fact that setting a border changes the margin behaviour is related but distinct. Unfortunately, I don’t have the time to answer that, too.

Konrad Rudolph 2010-06-30 15:31:53

Answer 2

A:

Margin is on the outside of a border and padding is on the inside of a border, so your top margin would cause the margin to exist above the border. If you want the padding between your paragraph and border use padding not margin. The size of the div will be determined by the margin, padding, and border. They will all contribute to the size of the div.

Brendan Enrick 2010-06-30 12:52:38

Answer 3

+1 A:

@aizuchi,

First of your CSS has an error. Check for "pic" right to "margin-bottom".

Second of all add "overflow:hidden;" to #container element, once you haven't set siez of parent element you must have this tag to tell parent which size to use. It will make #container to use height of child element at it's own (#container) which is probably the problem in your CSS besides "pic".

Third of all, Google box model bug in IE6 to understand difference between our "beloved" ie6 and other browsers.

Fourth of all

it is better to use

<LINK rel="StyleSheet" href="style.css" type="text/css" media="screen" />

instead of

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

eugeneK 2010-06-30 12:55:50

Error fixed - thanks! But I still don't understand why the presence or absence of the border changes the amount of background green showing in the container div....

2010-06-30 13:09:23

Did you set overflow:hidden; on #container ?

eugeneK 2010-06-30 13:19:05

ansaurus

tags:

views:

answers:

Why does border affect the containing block size in CSS?

related questions