0

Please check the below HTML code. If I remove border from the first element inside the body, the body starts in a new line, but when I include border the new line just disappears. Someone please explain why it is happening.

article {
  border: 3px solid grey;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.box {
  width: 7rem;
  height: 7rem;
  background-color: aqua;
  float: left;
  margin-right: 1rem;
}
<article class="clearfix">
  <div class="box"></div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus dolores, nulla minima dolorum rerum earum ea porro necessitatibus ullam recusandae culpa magni cupiditate dolore nobis quibusdam similique sit. Nostrum, atque.
  </p>
</article>

I thought the border style wouldn't affect the block level elements and it's styles, but it seems like I am wrong. Please clarify this for me

j08691
  • 204,283
  • 31
  • 260
  • 272
Abisheak Sureshkumar
  • 23
  • 3
  • it's a collapsing margin: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing – Pete Jan 25 '23 at 15:12

0 Answers0