CSS显示块属性边距问题答案

【问题标题】：CSS display block property margin issueCSS显示块属性边距问题
【发布时间】：2016-12-27 10:15:39
【问题描述】：

有时我在 div 上使用边距（显示：块）并且不能正常工作，但是使用 inline-block 工作，我怀疑是为什么？这种情况下的边距是否应该以同样的方式工作？

我知道我可以使用 .box margin-top、.box + box margin-top 等...但这不是问题。

.box {
  border: 1px solid #500;
}
.block-div-margin {
  margin: 10px 0;
  display: block;
  /*default div state*/
}
.inline-block-div-margin {
  display: inline-block;
  margin: 10px 0;
}
.my-div {
  padding: 20px;
  background: #EAEAEA;
  border-bottom: 1px solid #999;
}
.my-other-div {
  background: #D3E1E1;
  padding: 0 20px 20px 20px;
}
.my-other-div-content {
  margin-top: 20px;
}
.my-div-inline-block {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

<h2>Example 1</h2>
<h3>block-div-margin</h3>
<div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, nobis.</div>
  <div class="block-div-margin"></div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, delectus!</div>
  <div class="block-div-margin"></div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, quasi.</div>
  <div class="block-div-margin"></div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, id!</div>
</div>

<h3>inline-block-div-margin</h3>
<div class="container">
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, nobis.</div>
  <div class="inline-block-div-margin"></div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, delectus!</div>
  <div class="inline-block-div-margin"></div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, quasi.</div>
  <div class="inline-block-div-margin"></div>
  <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, id!</div>
</div>

<h2>Example 2</h2>
<h3>This is more common issue that I see ever</h3>
<div class="my-div">
  This is my-div content
</div>
<div class="my-other-div">
  <div class="my-other-div-content">
    This is my-other-div-content
  </div>
</div>

<h3>With div inline-block</h3>
<div class="my-div">
  This is my-div content
</div>
<div class="my-other-div my-div-inline-block">
  <div class="my-other-div-content">
    This is my-other-div-content
  </div>
</div>

即使元素在另一个元素中，当添加边距时，就好像我在父元素中添加了边距，而不是在子元素中。

【问题讨论】：

标签： html css margin

【解决方案1】：

这称为折叠边距，内联块不会发生这种情况。

8.3.1 Collapsing margins

内联块框的边距不会折叠（即使是它们的流入子框也不折叠）。

关注this post 了解更多避免这种情况的方法。

【讨论】：