html - 内容中带有边框的奇怪行为

Question

请看下面

Fiddle1 Fiddle2 HTML:

<div class="container">
  <div class="content">
    <div class="space">
    </div>  
    <div class="item">
      DIV1
    </div>
  </div>
</div>

CSS:

.container {
  position:relative;
  height: 100%;
  width:100%;
}
.content {
  height:100%;
  border:1px solid red;
}
.space {
  margin-top:80px;
 border:1px solid blue;
}

.item {
  position: absolute;
  top:80px;
  left:50px;
  font-size:20px;
  font-weight:bold;
  color: #999999;
  text-align: center;
}

唯一的区别是内容类中的边框语句，但输出不同。

你能解释一下发生了什么吗？

Answer 1

是margin collapsing .边框(如果存在)可防止 .space 的上边距折叠。没有边框，它会折叠其所有祖先的上边距，包括 body(这是 .item 位置的“基础”)，导致它们移动 80px下。