html

Question

我有两个section元素，分别包含idid，container2，每个元素都有一个ul元素作为第一个子元素。 section＃container1有一个边框。

• 如果我为ul元素设置了一个边距，对于＃container1部分（其中 有边框）边距在容器内，for section＃container2，在ul元素之前没有子元素，边距 在容器外面。
• 如果父级的第一个子级没有设置其维度，则会发生这种情况。

jsbin link of the page。 screenshot of the page. https://developers.braintreepayments.com/start/hello-client/ios/v4#present-drop-in-ui 我的问题是关于块元素的行为。我明白这是非常基本的。

1. 如果我们没有设置父块元素的高度或宽度，那么 我们为第一个孩子设置的边距被渲染，好像它被设置为 父节点。

2. 但是如果我们有边框，那么在这种情况下边距设置在里面 父容器和容器展开。为什么会这样？

任何人都可以解释一下这种行为吗？如果您有任何资源解释这样的基本行为，请指出。存在许多这样的小行为，任何教程都没有提到。如果任何人有一个这样的小东西的列表或你通过开发网页学到的东西，请在评论或答案中提供链接或提及。这对初学者来说真的很有用。

Answer 1

我相信你正在经历＆＃34;崩溃边缘＆＃34;。折叠边距的规则之一是第一个孩子的顶部和底部边缘不会将孩子推离其容器，而是将边缘应用于容器的外部。它只是CSS中的一条规则。您可以对容器执行的一些不适用此规则的事情是

• 添加边框
• 添加填充
• 添加overflow: auto

在此处阅读更多https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing