嵌套块元素外边距合并导致的塌陷问题

最新推荐文章于 2023-11-29 11:41:27 发布

-眼里有星河-

最新推荐文章于 2023-11-29 11:41:27 发布

阅读量325

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/m0_62092622/article/details/122378236

版权

一.外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注：只有普通文档流中块框的垂直外边距才会发生外边距合并。

行内框、浮动框或绝对定位之间的外边距不会合并。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上或下外边距也会发生合并。

接下来看一下这个例子：

<!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>外边距合并的塌陷</title>
</head>
<style>
    .box{
        background: blueviolet;
        width: 300px;
        height: 300px;
    }
    .in-box1{
        background: red;
        width: 200px;
        height: 200px;
        margin-top: 100px;
    }
    .in-box2{
        background: blue;
        width: 100px;
        height: 100px;
        margin-top: 50px;
    }
</style>
<body>
    <div class="box">
        <div class="in-box1">
            <div class="in-box2"></div>
        </div>
    </div>
</body>
</html>

运行代码会发现出现以下结果：

这是因为紫色块外边距为0，红色为100px，蓝色为50px，三者最大为100px，所以合并为100px，这和我们预期的效果不符，那么如何来解决这种情况呢有以下三种方法。

二.解决办法

第一种：利用border

为父元素添加上边框，将css中的代码改为如下模样：

<style>
    .box{
        background: blueviolet;
        width: 300px;
        height: 300px;
        margin-top: 0;
        border-top: 1px solid blueviolet;
    }
    .in-box1{
        background: red;
        width: 200px;
        height: 200px;
        margin-top: 100px;
        border-top: 1px solid red;
    }
    .in-box2{
        background: blue;
        width: 100px;
        height: 100px;
        margin-top: 50px;
    }
</style>

第二种: 利用padding

为父元素添加内边距

<style>
    .box{
        background: blueviolet;
        width: 300px;
        height: 300px;
        margin-top: 0;
        /* border-top: 1px solid blueviolet; */
        padding: 1px;
    }
    .in-box1{
        background: red;
        width: 200px;
        height: 200px;
        margin-top: 100px;
        /* border-top: 1px solid red; */
        padding: 1px;
    }
    .in-box2{
        background: blue;
        width: 100px;
        height: 100px;
        margin-top: 50px;
    }
</style>

第三种：利用overflow：hidden

为父元素设置overflow：hidden

<style>
    .box{
        background: blueviolet;
        width: 300px;
        height: 300px;
        margin-top: 0;
        overflow: hidden;
        /* border-top: 1px solid blueviolet;
        padding: 1px; */
    }
    .in-box1{
        background: red;
        width: 200px;
        height: 200px;
        margin-top: 100px;
        overflow: hidden;
        /* border-top: 1px solid red;
        padding: 1px; */
    }
    .in-box2{
        background: blue;
        width: 100px;
        height: 100px;
        margin-top: 50px;
    }
</style>

结果如下：

问题解决啦！

-眼里有星河-

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
嵌套块元素外边距合并导致的塌陷问题

一.外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。注：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上或下外边距也会发生合并。接下来看一下这个例子：<!DOCTYPE html><html lang="en"><head&..
复制链接

扫一扫