上下外边距合并

最新推荐文章于 2024-05-17 13:19:50 发布

叁五程序员

最新推荐文章于 2024-05-17 13:19:50 发布

阅读量405

点赞数 1

文章标签： css 前端 html vscode

本文链接：https://blog.csdn.net/qq_53002615/article/details/122506944

版权

两个常规流块盒，上下外边距相邻时，会进行合并

兄弟关系

<!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>
    <style>
        .p1{
            margin-bottom: 50px;
        }
        .p2{
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut alias doloremque inventore? Sequi, suscipit a nesciunt, reprehenderit labore atque consequuntur numquam, quaerat animi alias dolore repellat nulla excepturi officia neque.</p>
    <p class="p2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque minus velit maiores aut, explicabo laudantium reprehenderit magnam! A explicabo tenetur praesentium, vel saepe commodi sint officiis, quibusdam nisi corporis nihil?</p>
</body>
</html>

p1元素的下边距为50px

p2元素的上边距为50px

从上图可以看出，两者进行了合并

父子关系

<!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>
    <style>
        .div1{
            background-color: cadetblue;
            width: 300px;
            height: 300px;
            margin-top: 100px;
        }
        .div2{
            background-color: coral;
            width: 100px;
            height: 100px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2">

    </div>
</div>
</body>
</html>

页面显示效果

从上图可以看出，我们设置了div2的magin-top为50px，我们想的是div2的上边距，距离div1的上边距为50px，但由于发生了上下外边距合并，导致两者合并

解决：

1、在div1中加入边框

        .div1{
            background-color: cadetblue;
            width: 300px;
            height: 300px;
            margin-top: 100px;
            border: 10px solid;
        }

2、若不想设置边框，可设置padding

        .div1{
            background-color: cadetblue;
            width: 300px;
            height: 300px;
            margin-top: 100px;
            padding-top: 50px;
        }
        .div2{
            background-color: coral;
            width: 100px;
            height: 100px;
        }

叁五程序员

关注

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-scal
复制链接

扫一扫