Height of body element is increasing on adding a border to it?

Question

div {
  border: 2px solid black;
  margin-bottom: 2000px;
}

<!DOCTYPE html>
<html>

<body>

  <div>
  
    fsdfdfdfdvxvxcbxfvgxb
    
  </div>

</body>

</html>

Inspect the height of the body element in the above snippet . It is equal to the content area i.e. the body height == div height

div {
  border: 2px solid black;
  margin-bottom: 2000px;
}

body {
  border: 2px solid black;
}

<!DOCTYPE html>
<html>

<body>

  <div>

    fsdfdfdfdvxvxcbxfvgxb

  </div>

</body>

</html>

In the above snippet . when we add border to the body element ,height of the body increases to 2000px .

My question is---- Why does this happens ??

Can you add a background color to body first snippet?. makes the body completely changes. — Rayees AC, Sep 16 '20 at 10:08
it's about collapsing margins : https://css-tricks.com/what-you-should-know-about-collapsing-margins/ -/- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing Since you give a border to body (could be padding too) margin of its child is contained inside, else it appears outside — G-Cyrillus, Sep 16 '20 at 10:13
When you have an element which has ````height: 200px; border-bottom: 1px```` the element is 200px height but the border increases its height to 201px. For this, use ````box-sizing: border-box````. Then the total height will be 200px. — michaelT, Sep 16 '20 at 10:15

0 Answers0