html - html中 block 元素的行为

Question

我有两个 section 元素，其 ID 分别为 container1、container2。它们都有一个 ul 元素作为它们的第一个子元素。 section#container1 有边框。

• 如果我为 ul 元素设置边距，对于 section#container1(which有边框)边距在容器内，因为section#container2，在 ul 元素之前没有子元素，边距在容器外面。
• 当父级未设置其维度时，这发生在父级的任何第一个子级上。

jsbin link of the page .screenshot of the page.我的问题是关于 block 元素的行为。我明白这是非常基本的。

1. 如果我们不设置父 block 元素的高度或宽度，我们为第一个 child 设置的边距被渲染为好像它是为第一个 child 设置的一样 parent 。

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

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

Answer 1

我相信您正在经历“利润下降”。折叠边距的规则之一是第一个 child 的顶部和底部边距不会将 child 推离其容器，而是将边距应用于容器的外部。这只是 CSS 中的一条规则。您可以对容器执行一些操作以使此规则不适用

• 添加边框
• 添加填充
• 添加溢出:自动

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