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

最新推荐文章于 2025-04-29 21:17:50 发布

原创

最新推荐文章于 2025-04-29 21:17:50 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

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

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;
            padding: 0;
        }