Inline-block元素推入其他Inline-block元素

Question

为什么像span这样的内联块元素会在它们之外推送其他内联块元素，例如

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

将把所有Span 1和2移到Span 3所在的位置?

Answer 1

因为块是按基线对齐的-典型字母的底部:

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>