MezzanineLearner MezzanineLearner - 1 month ago 7
HTML Question

Inline-block element pushing other iinline-block elements

Why inline-block elements like spans other inline-block elements push besides them, for example



<span>Span 1</span>
<span>Span 2</span>
<span style="margin-top">Span 3</span>





will move all spans 1 and 2 where Span 3 goes?

Answer

Because blocks are aliigned by baseline - the bottom of typical letters:

span {
  display: inline-block;
  background: silver;
}

p {
  border: 1px dotted red;
}
<p>
  Base line goes here __________
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3</span> _______
</p>

<p>
  Base line goes here __________
  <span>Span 1</span>
  <span>Span 2</span>
  <span style="margin-top: 1em;">Span 3</span> _______
</p>

<p>
  Base line goes here __________
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3<br>Span 3</span> _______
</p>