CSS布局疑问：为何span元素会与div元素重叠？

问题代码 #

CSS 代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

div {
  background: red;
}

span {
  height: 200px;
  width: 200px;
  background: green;
  padding: 20px;
  margin: 200000px 40px;
}

HTML 代码

<div>1</div>
<span>2</span>

重叠现象的原因 #

• span是默认行内元素：<span>标签的默认显示类型是inline，这类元素的垂直方向边距规则和块级元素完全不同。
• 垂直margin不影响块级元素布局：块级的<div>会独占一行，而行内元素的垂直margin（这里是超大的margin-top:200000px）不会像块级元素那样把前方元素向下推开，它只会改变自身的位置，不会触发<div>的位移。
• 超大margin-top导致span上移覆盖：因为设置了极大的margin-top，span会向上偏移，直接进入<div>所在的区域，最终和<div>产生重叠。

额外说明：行内元素默认不支持width和height属性，你看到的span有宽高，实际是padding撑开的（因为box-sizing: border-box，padding会被计入元素尺寸），不过这和重叠现象无关。

内容的提问来源于stack exchange，提问作者Sandeep Ranjan