【CSS入门】第三课 - padding内填充
经海路大白狗 2024-08-22 10:33:05 阅读 88
上一节，我们说了margin外边距，还举了个例子，比如两个人紧挨着站着，如果两个人冬天穿了棉袄，很厚很厚的棉袄，那么他俩占据的空间就会增加，他俩之间的真实距离也会增加。
这一节，我们说padding内填充。再举个例子呢就是，比如这俩人最近营养好了，吃的胖了。试想一下，他俩虽然还是紧紧挨着，但占据的空间也会不一样了，对吧。那么这一节，我们从一些角度，来说一说 padding内填充 这个知识点。
目录
1 块元素的padding
1.1 默认的样式
1.2 看一下默认的宽高
1.3 增加内填充后的样式
1.4 对宽高的影响
2 行内元素的padding
2.1 看一下默认的样式
2.2 设置内填充
3 总结
1 块元素的padding
1.1 默认的样式
<code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />code>
</head>
<body>
<div class="box">已经是立秋了，还是挺热的</div>code>
</body>
</html>
.box {
width: 300px;
height: 200px;
border: 1px solid red;
}
这是一段正常的代码，我们还没有添加padding呢。
1.2 看一下默认的宽高
还是像上一节说的那样，浏览器有个默认的留白，我们可以通过设置 body 标签的margin值来去掉留白，对吧。然后你看内部的文字呢，是紧贴着边框的。现实开发中，文字紧贴着边儿肯定不好看，所以，我们加一个内填充试试。
再尝试之前，我们看一下这个元素，我们设置的宽300px，高200px，然后由于加了一层 1px 的边框呢，元素的宽高不同了。然后我们添加一下内填充，看看有什么改变。
1.3 增加内填充后的样式
<code>.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 看一下默认的样式
<code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title>我的第一个网页</title>
<link rel="stylesheet" type="text/css" href="./css/index.css" />code>
</head>
<body>
<div class="box">已经是立秋了，还是挺热的</div>code>
<div>
<span class="box1">等处暑就凉快多啦。</span>code>
</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 设置内填充
<code>.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，而且没有对父元素产生影响，自己的显示位置（上下）并没有发生便宜（你看，块元素的时候，上下位置就变了）
3 总结
这一节，我们对块元素和行内元素的内填充，也就是padding做了一些了解学习，他们有一些共同点，和一些不同点。希望练习代码的过程中，多多总结，一点一滴的总结起来。
相同点：
都会增加自身元素的宽和高；
不同点：
块元素会改变内容的显示位置，包括横向和纵向的；但行内元素，横向会偏移，纵向不改变。
当然，这只是我们入门级的一些知识总结，到了后面实战的时候，你会发现，组合越来越多，一个元素会设置N个样式，从而达到网页设计的预期效果。
不过虽然网页设计内容丰富，且组合千变万化，但再复杂的东西，都需要从开始点击积累，熟练掌握这些特性们，在后边组合实战的时候，才能做出更完美的更符合预期设计的网页来。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。