内联块元素推送其他iinline-block元素

Question

为什么内联块元素（如跨越其他内联块元素）会推动它们，例如

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

会移动跨越3的所有跨度1和2吗？

Answer 1

因为块按基线排列 - 典型字母的底部：

＆＃13;

＆＃13;

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

p {
  border: 1px dotted red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;