html盒模型中关于外边距塌陷问题（父子关系外边距和兄弟关系外边距）

最新推荐文章于 2024-07-16 10:51:54 发布

silence^

最新推荐文章于 2024-07-16 10:51:54 发布

阅读量1k

点赞数 3

本文链接：https://blog.csdn.net/lyclyc_/article/details/106960273

版权

本文探讨了HTML盒模型中的外边距塌陷问题，包括父子关系和兄弟关系下的表现及原因。在父子关系中，塌陷导致父盒子与子盒子间距失效；在兄弟关系中，两个相邻盒子的外边距只显示最大值。解决方法包括为父盒子添加边框、内边距或设置`overflow:hidden`来触发BFC规则，以及为相邻兄弟盒子添加共同父盒子并应用`overflow:hidden`。

摘要由CSDN通过智能技术生成

1，父子盒子外边距塌陷
父子关系外边距塌陷的表现是：父盒子和子盒子粘在一起了，当给父盒子设置margin-top时，子盒子跟着父盒子一块下移了。给子盒子设置margin-top时，父盒子也跟着走。当子盒子和父盒子都设置margin-top时，哪个值大，就按照哪个值。
塌陷原因：父子盒子公用一个外边距区域。
解决办法：
1，给父盒子设置边框或内边距
2，给父标签添加overflow:hidden属性，触发BFC规则（块级格式上下文，把父级渲染成一个独立区域。）
代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            margin: 0;