0

why 'margin-bottom' have no effect on absolutely positioned element that have 'width' and 'top' properties set. Same goes for 'margin-top' if element has 'bottom' property set

.first {
  position: absolute;
  left: 0;
  top: 50%;
  
  width: 100px;
  height: 100px;
  margin-bottom: -100px;
  
  background-color: green;
}

.second {
  position: absolute;
  left: 100px;
  top: 50%;
  
  width: 100px;
  height: 100px;
  margin-bottom: 100px;
  
  background-color: blue;
}

.third {
  position: absolute;
  left: 200px;
  top: 50%;
  
  width: 100px;
  height: 100px;
  margin-top: 100px;
  
  background-color: red;
}
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

Coundn't find any info in spec related to this behaviour

TylerH
  • 20,799
  • 66
  • 75
  • 101
flasher1101
  • 63
  • 6
  • but margin has effect. If top is set, then margin-top has effect and margin-bottom doesnt – flasher1101 May 02 '22 at 17:41
  • The thing is you set `top: 50%` so no matter how much bottom margin you'll set it will always stays `50%` top relative to the parent. – RedRex May 02 '22 at 17:47

0 Answers0