外边距塌陷与合并

最新推荐文章于 2024-06-27 15:44:29 发布

lskaixin

最新推荐文章于 2024-06-27 15:44:29 发布

阅读量157

点赞数 1

本文链接：https://blog.csdn.net/ls08250907/article/details/119411471

版权

1.2 解决嵌套块元素垂直外边距的塌陷方法

二、相邻块元素垂直外边距的合并

2.1 什么是相邻块元素垂直外边距的合并

2.2 解决相邻块元素垂直外边距的合并的方法

前言

初学的代码人在使用margin的时候，在某些情况下会发现一个问题就是不管怎么加margin盒子就是不会动，有时候又只会左右动上下不能动，这就是今天要学习的内容嵌套块元素垂直外边距的塌陷和相邻块元素垂直外边距的合并。

一、嵌套块元素垂直外边距的塌陷

1.1 什么是嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距(或者没有上外边距）同时子元素也有上外边距，此时父元素会塌陷相对较大的外边距值，而子元素没有实现上外边距效果。

如下图所示，给蓝色盒子添加margin-top:50px;后，正常情况是蓝色盒子向下移动50px的距离，现在因为垂直外边距的塌陷导致粉红盒子和蓝色盒子一起向下移动50px的距离。

   .box {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }

        .box1 {
            width: 100px;
            height: 100px;
            margin-top: 50px; 
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>

1.2 解决嵌套块元素垂直外边距的塌陷方法

法一：为父元素定义上边框

    .box {
            border-top: 1px solid black;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }

        .box1 {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>

法二：为父元素定义内边距

  .box {
            padding-top: 1px;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }

        .box1 {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>

法三：在父元素添加overflow：hidden;

 .box {
            overflow: hidden;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }

        .box1 {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>

法四：给父或子元素添加固定

法五：给父或子元素用绝对定位

二、相邻块元素垂直外边距的合并

2.1 什么是相邻块元素垂直外边距的合并

当上下相邻的两个块元素都设置外边距（margin），如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂直间距不是 margin-bottom + margin-top。实际会取两个值中的较大者作为外边距，这种现象被称为相邻块元素垂直外边距的合并
如图所示，两个盒子之间的距离还是只有50px。

     .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 50px;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>

2.2 解决相邻块元素垂直外边距的合并的方法

最简单的方法：给一个盒子设置margin-bottom值后，就不给它下面的盒子设置

margin-top值了。

lskaixin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
外边距塌陷与合并

初学的代码人在使用margin的时候，在某些情况下会发现一个问题就是不管怎么加margin盒子就是不会动，有时候又只会左右动上下不能动，这就是今天要学习的内容嵌套块元素垂直外边距的塌陷和相邻块元素垂直外边距的合并。一、嵌套块元素垂直外边距的塌陷1.1 什么是嵌套块元素垂直外边距的塌陷如下图所示，给蓝色盒子添加margin-top:50px;后，正常情况是蓝色...
复制链接

扫一扫