css border changes the div size completely? [duplicate] - html

Question

This question already has answers here:
Impact of border property on top margin
(3 answers)
Closed 7 years ago.
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.

Answer 2

The Header size is same, just the background will not fill the area specified as element margin. Your h1 has default margin at top and bottom which is not calculated by browser to be filled. In order to force it you can use overflow: hidden; on Header, an old trick that covers 99% of famous clearfix class (for float fix):
#header {
background: yellow;
overflow: hidden;
}
#sidebar {
float: left;
width: 30%;
background: green;
}
#content {
float: left;
width: 70%;
background: lime;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
The other way would be to avoid h1 margin and use padding instead, or fixed height:
#header {
background: yellow;
}
#sidebar {
float: left;
width: 30%;
background: green;
}
#content {
float: left;
width: 70%;
background: lime;
}
h1 {
margin: 0;
padding: .8em 0;
}
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>

Answer 3

You can add box-sizing to prevent this from happening. Not every browser supports it though.
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}

Answer 4

The total size of an element is going to be defined by:
Margin>Border>Padding>Actual element size
Your browser's developer console should allow you to see the value of all of these so try and see which one is changing between those two instances. From the pictures provided it looks like the padding may be changing as you manually adjust the border.
Try manual setting these values:
#header{
border: 1px;
border-color: black;
margin: 0;
padding: 0;
}

Answer 5

Set margin on the h1 tag to 0:
h1 {
margin:0;
}
I updated your fiddle here

Answer 6

Perfect example why sometimes using outline instead of border can solve a lot of headache.
Outlines differ from borders in the following ways:
Outlines do not take up space, they are drawn above the content.
With much respect to all other solutions (which are important to understand), try using the following as an easy fix:
outline: 1px solid black;
instead of
border: 1px solid black;
JSFiddle
Cheers!

Answer 7

div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 1px solid yellow;
}