Question

我是HTML初学者，我知道填充是内容和边框之间的空间，而边距是边框外的空间。

因此，如果我想在内部元素和外部元素之间创建一些空间 - 就像我希望从 pic1 - original status到 pic2 - excepted result 的效果，它应该放置{{1}在外部元素上而不是将padding-top: 100px;放在内部元素上。

所以，我的问题是，当我将margin-top: 100px;放在内部元素上时，不能创建空间（ pic3 - no effect css setting ），但为什么当我将margin-top: 100px;放在外部元素上时呢？在身体和外部元素之间创造空间？

然后我尝试将margin-top: 300px;放在外部元素上，padding-top: 100px;放在内部元素上，我得到了一个惊讶的结果（ pic4 - surprised result ），margin-top: 100px; on内部元素再次起作用！那么我仍然不理解的概念或细节，谁能告诉我？顺便说一句，这是我第一次在stackoverflow上提问：）

pic1 - original status

pic2 - excepted result 将margin-top: 100px;放在外部元素上

pic3 - no effect css setting 将padding-top: 100px;放在内部元素

上

pic4 - surprised result 将margin-top: 100px;放在外部元素上内部元素

和padding-top: 100px;

HTML

margin-top: 100px;

pic 1的CSS

<body>
    <div class="center outside">
        <div class="center inside">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur modi repellendus, aliquam impedit! Harum autem repellat voluptate sint assumenda nam illo! Voluptatibus amet, porro dolor. Nostrum, eaque, ad. Iste nesciunt reprehenderit quaerat officia facilis a libero fugit minus modi quia. Voluptatum similique sapiente voluptatem iure amet ea perspiciatis est. Tempora.</div>
    </div>
</body>

图2的CSS

.center {
    margin: 0 auto;
}

.outside {
    margin-top: 300px;
    width: 30%;
    background-color: coral;
}

.inside {
    padding: 20px;
    width: 80%;
    background-color: aquamarine;
}

pic 3的CSS

.center {
    margin: 0 auto;
}

.outside {
    margin-top: 300px;
    padding-top: 100px;
    width: 30%;
    background-color: coral;
}

.inside {
    padding: 20px;
    width: 80%;
    background-color: aquamarine;
}

pic 4的CSS

.center {
    margin: 0 auto;
}

.outside {
    margin-top: 300px;
    width: 30%;
    background-color: coral;
}

.inside {
    margin-top: 100px;
    padding: 20px;
    width: 80%;
    background-color: aquamarine;
}

Answer 1

元素的边距（特别是顶部和底部）在它们碰到或覆盖父/子元素边距时会折叠。

由于这些规则可能会有点复杂，不是那么高级的css用户应该尽可能避免使用边距而是使用填充。

在你的情况下，由于父元素没有边框或填充，浏览器使用父和子的最大边距并将其放在父元素周围。

更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

在内部元素和外部元素之间创建空间

1 个答案: