重叠外边距

最新推荐文章于 2024-09-11 20:31:47 发布

uniik

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量88

点赞数

分类专栏：前端笔记分享文章标签： css css3 前端 html

本文链接：https://blog.csdn.net/uniik/article/details/123075871

版权

前端笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

外边距重叠问题

同一层相邻元素之间

<style>
p:nth-child(1){
  margin-bottom: 13px;
}
p:nth-child(2){
  margin-top: 87px;
}
</style>

<p>下边界范围会...</p>
<p>...会跟这个元素的上边界范围重叠。</p>

发生边界折叠，只会挑最大的边界范围留下。

没有内容将父元素和后代元素分开

<style type="text/css">
    section    {
        margin-top: 13px;
        margin-bottom: 87px;
    }

    header {
        margin-top: 87px;
    }

    footer {
        margin-bottom: 13px;
    }
</style>

<section>
    <header>上边界重叠 87</header>
    <main></main>
    <footer>下边界重叠 87 不能再高了</footer>
</section>

MDN：如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

空的块级元素

<p>up</p>
<div style="margin-top: 20px; margin-bottom: 50px"></div>
<p>bottom</p>
<!--实际上只有50px-->

空的块级元素：当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距padding、高度height、最小高度min-height 、最大高度max-height 、内容设定为inline或是加上clear-fix的时候。