携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

1️⃣概述

大家好，我是翼同学，今天的笔记内容是：

盒子模型中的：
填充区（内边距padding）
空白区（外边距margin）。

盒子模型（1）.png

2️⃣填充区和空白区

padding

填充区就是边框和实际内容之间的内边距，用属性padding表示。

实例如下：

内边距	含义
padding: 10px;	上下左右设置10px内边距
padding: 10px 20px;	上下内边距10px，左右内边距为20px
padding: 10px 20px 30px;	上内边距10px，左右内边距20px，下内边距30px
padding: 10px 20px 30px 40px;	上内边距10px，右内边距20px，下内边距30px，左内边距40px

当然，padding属性也可以细分到每一边：

padding-left：左内边距；
padding-right：右内边距；
padding-top：上内边距；
padding-bottom：下内边距。

小结：

padding属性定义元素的内边距，也就是元素边框与元素内容之间的空白区域。该属性可以接受长度值，也可以用百分比值，此时百分比是相对于父元素的宽度width计算的。举个例子：div { padding: 10% }用于将盒子的内边距设置为父元素width的10%。内边距属性可以细分到每一边的属性，也可以通过不同的取值设置不同的样式。

撑开盒子

需要注意的是，当内容和边框之前设定了内边距，那么这段距离会影响到盒子的实际大小。因此，设置内边距会撑开盒子，也就是填充的距离会加到盒子的总宽度。

举个例子：

div {
    width: 400px;
    height: 200px;
    background-color: skyblue;
}

但是一旦加了内边距padding: 20px;后，盒子的大小就不止400×200了，如下所示：

那么，如何保证盒子和效果图的大小保持一致？有两种解决方法：

让总宽度width和总长度height减去多出来的内边距
设置box-size属性，也就是这串代码：box-sizing: border-box;

方法一很简单，手动计算，自动减去内边距再赋值设置盒子的大小。

而方法二更简单，直接设置box-sizing属性。这使得对象的实际宽度就等于设置的width值，即使定义有border值和padding也不会改变对象的实际宽度。

举个例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 150px;
            box-sizing: border-box;
        }

        .div1 {
            background-color: skyblue;
            padding: 0;
        }

        .div2 {
            background-color: pink;
            padding: 30px;
        }

    </style>
</head>
<body>
    <div class="div1">无填充</div>
    <div class="div2">有填充</div>
</body>
</html>

效果如下：

margin

margin属性用于设置外边距，一般用于控制盒子之间的距离。

外边距	含义
margin-top	上外边距
margin-right	右外边距
margin-left	左外边距
margin-bottom	下外边距

也padding一样，margin也接受1~4个值，如下所示：

外边距	含义
margin: 10px;	上下左右设置10px外边距
margin: 10px 20px;	上下外边距10px，左右内外边距为20px
margin: 10px 20px 30px;	上外边距10px，左右外边距20px，下外边距30px
margin: 10px 20px 30px 40px;	上外边距10px，右外边距20px，下外边距30px，左外边距40px

3️⃣写在最后

好了，今天的笔记就记到这里。

【CSS 盒子模型(下)】：padding 和 margin