0

HTML

 <div class="top"><p>hello</p></div>
 <div class="bottom"><p>hello</p></div>

CSS

.bottom {
  overflow: hidden;
}

I have stumbled upon this question while learning CSS basics: why does overflow: hidden causes a vertical shift in this example? Everything works as expected when removing this property or using .bottom p {overflow: hidden;}. I saw similar questions but they are about inline-blocks (and in my case everything is block if I'm not mistaken).

forcestaff
  • 3
  • 1

1 Answers1

0

Basically in your example, you have <p> tag with default top and bottom margins. Collapsing margins happen when two vertical margins come in contact with one another. If one margin is greater than the other, then that margin overrides the other, leaving one margin. overflow: hidden prevents that and makes a block element squeeze as wide as it can without overflowing.

More info here: https://css-tricks.com/what-you-should-know-about-collapsing-margins/

DokuDoki
  • 77
  • 1
  • 4