css border changes the div size completely? [duplicate]

Question

EDIT: found a very good link explaining all about border collapse:

border collapse explained with examples

End of edit. Enjoy :)

I am failing to understand this... Why applying a 1px solid black border to my div changes the div's size by a lot? (without the border I can see a relatively thin line as my back ground color, with the border the רectangle of the background color is much wider, see the pictures) this pic is without applying the border: and now look at this photo (the only difference is the border...)

can someone explain how the border influences so much on the div size / what is really happening here?!

style:

#header {
background-color: yellow;
color: white;
text-align: center;
border: 1px solid black;
}

here is a fiddle so you can play around: my fiddle Thanks a lot, Jimmy.

Answer 1

That's because of margin collapsing.

The margin is not part of the element iself, it's the distance between the element and surrounding elements, or between the element and containing borders or paddings.

In the first image the margins of your header element (a h1 perhaps?) is collapsing outside the div. The margins doesn't affect the size of the div, instead it pushes the surrounding elements away.

When you add a border to the div, then the margins of the header element will push the border away from the header element instead of pushing surrounding elements away. The margins of the header element determine the size of the div.