CSS padding margin 盒模型

最新推荐文章于 2025-03-23 15:00:41 发布

Lemon Love

最新推荐文章于 2025-03-23 15:00:41 发布

阅读量168

点赞数

本文链接：https://blog.youkuaiyun.com/qq_18873031/article/details/106061763

版权

本文深入讲解CSS盒模型中padding和margin的使用技巧，包括不同属性值的复合写法及其对容器大小的影响，以及如何解决margin-top传递和上下外边距叠压的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            padding:100px;
            padding:100px 50px 20px 10px;
        }
    </style>
    <!--padding 内填充
    注意：设置padding后会撑大容器大小
    padding的四个方向
    top right bottom left

    padding复合写法

    只有一个属性值时，
        四个方向都是同一个值
        padding:100px;
    设置两个属性值时，
        第一个属性值是上下两个方向，
        第二个属性值是左右两个方向
        padding:100px 50px;
    设置三个属性值时，
        第一个属性值是上边一个方向，
        第二个属性值是左右两个方向，
        第三个属性值是下边一个方向，
        padding:100px 50px 20px;
    设置四个属性值时，
        第一个属性值是上边一个方向，
        第二个属性值是右边一个方向，
        第三个属性值是下边一个方向，
        第四个属性值是左边一个方向，
        padding:100px 50px 20px 10px;

    -->
</head>
<body>
    <div>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
</body>
</html>

在这里插入图片描述

margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            background-color: red;
            border:1px solid black;
        }
        #div1{
            height: 50px;
            background-color: pink;
            margin:100px 100px 200px 100px;
        }
        #div2{
            height: 50px;
            background-color: yellow;
            margin:100px;
        }
    </style>
    <!--margin 外边距
        1、margin-top传递
            父子级包含的时候，子级的margin-top会传递给父级
            解决方法：仅用已学知识点border解决
        2、margin上下叠压
            上下外边距会叠压
            解决技巧：
                1、使用margin，可以将某一个元素方向设置成预想的值，margin叠压会取最大的margin值
                2、如果元素没有特殊特征，也可以用padding代替
    -->
</head>
<body>
    <div id="box">
        <div id="div1">1</div>
        <div id="div2">2</div>
    </div>

</body>
</html>

在这里插入图片描述

<!--
        盒模型大小：border + padding + width/height
            宽度：100 + 20 + 40 = 160
            高度：100 + 20 + 40 = 160
    -->