【CSS入门】第三课 - padding内填充

上一节，我们说了margin外边距，还举了个例子，比如两个人紧挨着站着，如果两个人冬天穿了棉袄，很厚很厚的棉袄，那么他俩占据的空间就会增加，他俩之间的真实距离也会增加。

这一节，我们说padding内填充。再举个例子呢就是，比如这俩人最近营养好了，吃的胖了。试想一下，他俩虽然还是紧紧挨着，但占据的空间也会不一样了，对吧。那么这一节，我们从一些角度，来说一说 padding内填充 这个知识点。

1 块元素的padding

1.1 默认的样式

1.2 看一下默认的宽高

1.3 增加内填充后的样式

1.4 对宽高的影响

2 行内元素的padding

2.1 看一下默认的样式

2.2 设置内填充

3 总结

1 块元素的padding

1.1 默认的样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><link rel="stylesheet" type="text/css" href="./css/index.css" /></head><body><div class="box">已经是立秋了，还是挺热的</div></body>
</html>

.box {width: 300px;height: 200px;border: 1px solid red;
}

这是一段正常的代码，我们还没有添加padding呢。

1.2 看一下默认的宽高

还是像上一节说的那样，浏览器有个默认的留白，我们可以通过设置 body 标签的margin值来去掉留白，对吧。然后你看内部的文字呢，是紧贴着边框的。现实开发中，文字紧贴着边儿肯定不好看，所以，我们加一个内填充试试。

再尝试之前，我们看一下这个元素，我们设置的宽300px，高200px，然后由于加了一层 1px 的边框呢，元素的宽高不同了。然后我们添加一下内填充，看看有什么改变。

1.3 增加内填充后的样式

.box {width: 300px;height: 200px;border: 1px solid red;padding-top: 20px;padding-left: 20px;
}

可以看出，原本贴边的内容，已经在内部产生了边距。所以，就需要把margin和padding组合起来记忆，margin是外部的，padding是内部的。

1.4 对宽高的影响

通过查看元素可以看出来，原本我们设置的宽300px，高200px，由于增加了边框，又增加了内部的填充边距，使得元素的宽高已经发生了变化。营养好了，吃胖了。

2 行内元素的padding

上面说了padding对于块元素的影响，我们继续说一下padding对于行内元素的影响。

2.1 看一下默认的样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>我的第一个网页</title><link rel="stylesheet" type="text/css" href="./css/index.css" /></head><body><div class="box">已经是立秋了，还是挺热的</div><div><span class="box1">等处暑就凉快多啦。</span></div></body>
</html>

.box {width: 300px;height: 200px;border: 1px solid red;padding-top: 20px;padding-left: 20px;
}
.box1 {border: 1px solid blue;
}

为了使我们说的这两个例子有个区分，我把咱们要说的行内元素，放到了另外一个div盒子元素内，让两个例子可以有个换行的效果。

我们可以看出，默认两个块元素是上下紧挨着的，然后行内元素也会默认紧挨着父元素。那么如果设置一下内填充呢，一起来看一下。

2.2 设置内填充

.box {width: 300px;height: 200px;border: 1px solid red;padding-top: 20px;padding-left: 20px;
}
.box1 {border: 1px solid blue;padding: 20px;
}

通过上图可以发现，行内元素设置了内填充padding后呢，

宽高也发生了对应的变化；
但是所显示的位置，左边距发生了变化，的确是向右移动了20px，
但是上边距，发生变化了吗？发生了，但他其实是往上顶了20px，而且没有对父元素产生影响，自己的显示位置（上下）并没有发生便宜（你看，块元素的时候，上下位置就变了）