Why does border affect the containing block size in CSS?

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.

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, he did no set width and height to #container element thus sizes are useless. – eugeneK Jun 30 '10 at 13:00 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! – user342492 Jun 30 '10 at 13:08 @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 Jun 30 '10 at 13:13 This is in Safari.

Try it yourself - it's a very interesting result. What are the errors in this CSS code that you see? – user342492 Jun 30 '10 at 14:29 The behavior is the same in Firefox and Safari - I think this is standard behavior, I'm just trying to understand why.

Thanks! – user342492 Jun 30 '10 at 14:34.

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 instead of.

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.... – user342492 Jun 30 '10 at 13:09 Did you set overflow:hidden; on #container? – eugeneK Jun 30 '10 at 13:19.

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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.