父子边距重合

牛小小小婷～

已于 2022-12-15 11:20:11 修改

阅读量297

点赞数

分类专栏： # html+css 文章标签： css css3 html

于 2022-07-09 00:07:56 首次发布

本文链接：https://blog.csdn.net/hannah2233/article/details/125672505

版权

html+css 专栏收录该内容

13 篇文章 3 订阅

订阅专栏

BFC【块级格式化上下文】+IFC【行内格式化上下文】
BFC（边距重叠解决方案）

其他博主的文章，写的挺好的

1-1 概念

1、概念：边界重合是指两个或多个盒子（可能相邻也可能嵌套）的相邻边界重合在一起而形成一个单一边界

1-2 例子：父子元素的边界重叠

1、

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .parent {
            background-color: red;
            /* height: 110px; */
            /*overflow: hidden;*/
        }
        
        .parent .child {
            background: #c8cdf5;
            height: 100px;
            margin-top: 10px;
        }
    </style>
    <section class="parent">
        <article class="child"></article>
    </section>
</body>

</html>

预期效果：
在这里插入图片描述
实际效果：

2、父元素的高度不是110px，而是100px，在这里发生了高度塌陷
3、产生原因：是如果块元素的margin-top与它的第一个子元素的margin-top之间没有border、padding、inlinecontent、clearance来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的 margin-bottom 之间没有border、padding、inlinecontent、height、min-height、max-height分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。

1-3 解决方法

1、父子元素的边界重叠解决方案：在父元素上加上overflow:hidden;，使其成为BFC
2、

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .parent {
            background-color: red;
            /* height: 110px; */
            overflow: hidden;
        }
        
        .parent .child {
            background: #c8cdf5;
            height: 100px;
            margin-top: 10px;
        }
    </style>
    <section class="parent">
        <article class="child"></article>
    </section>
</body>

</html>

牛小小小婷～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父子边距重合

1、概念：边界重合是指两个或多个盒子（可能相邻也可能嵌套）的相邻边界重合在一起而形成一个单一边界1、预期效果：实际效果：2、父元素的高度不是110px，而是100px，在这里发生了高度塌陷3、产生原因：是如果块元素的margin-top与它的第一个子元素的margin-top之间没有border、padding、inlinecontent、clearance来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的 margin-bottom 之间没有border、p
复制链接

扫一扫