Question

我很困惑为什么有时父元素有时不考虑子元素的边距。

以下是代码：

＆＃13;

section::after {
  content: '';
  display: block;
  clear: both;
}

section.main {
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 0;
}

section.main aside {
  float: left;
  text-align: center;
  width: 33%;
}

section.main .content {
  margin: 15px;
  background: no-repeat center top;
  background-size: 75px 75px;
  padding-top: 85px;
}

＆＃13;

<section class="main">
  <aside>
    <div class="content trending">
      <h3><a href="#">Where to find it</a></h3>
      <p>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Lorem ipsum dolor sit amet, consect.</p>

    </div>
  </aside>

</section>

＆＃13;

body元素不会考虑带有一个名为main的类的高度的部分边距，但是旁边的元素将用于它的孩子，为什么会这样呢？

Answer 1

子元素的边距可以“泄漏”父元素的顶部和底部边缘（这是margin collapsing的特殊情况），如果这些元素参与同一个block formatting context和父元素element在该边缘没有边框或填充（简单地说就是这样）。 section元素与body元素位于相同的块格式化上下文中，body元素默认情况下没有填充或边框，因此满足此条件。 section（aside元素）的内容是浮动的，浮点数由特殊的布局算法控制，不属于块格式化上下文（并为其内容建立新的块格式化上下文）），因此它的边距不会以section的边距崩溃。

Answer 2

“边距在相邻元素之间崩溃。简单来说，这意味着对于正常文档流程中的相邻垂直块级元素，只有具有最大边距值的元素的边距将被尊重，而边缘具有较小边际值的元素将折叠为零“

子元素的设置边距是否会影响父元素的大小？

2 个答案: