作者：dgh | 来源：互联网 | 2023-02-11 22:23
点此查看：完整教程、源代码及配套视频
本文目录
- 1. 前言
- 2. 默认情况
- 3. 设置内边距
- 4. 简写属性
- 5. 小结
1. 前言
上一篇介绍了外边距，也就是元素跟相邻元素的距离。
本篇来介绍内边距，顾名思义，内边距是指的元素内部的内容，与元素的边的距离。
CSS通过padding来控制内边距。
2. 默认情况
看如下代码：
<body><div class="box">假如生活欺骗了你不要悲伤，不要心急忧郁的日子里需要镇静相信吧，那快乐的日子即将来临心儿永远向往着未来现在却常是忧郁一切都是瞬息，一切都将会过去而那过去了的，将会成为亲切的怀恋div>
body>
我们为box类设置宽度、高度，并添加一个边框：
.box {width: 300px;height: 300px;border: 1px solid black;}
效果如下：
我们可以看到，默认情况下，元素内部的内容是紧贴着元素的边的，没有浪费空间。
3. 设置内边距
我们可以通过padding-top、padding-right、padding-bottom、padding-left、，分别设置元素的上、右、下、做外边距。
例如我们可以为box类添加如下样式代码，调整上方和左右两侧的内边距：
.box {width: 300px;height: 300px;border: 1px solid black;padding-top: 30px;padding-left: 15px;padding-right: 15px;}
通过上面的代码，我们将上边距设为了30px，而左右边距设为了15px，所以效果如下：
4. 简写属性
与外边距margin同样，padding内边距也支持简写属性：
padding: 10px;padding: 10px 20px;padding: 1px 2px 3px 4px;
也就是说，当只写一个值时，代表同时为4个边设置同样的内边距。
当写两个值时，第一个值代表上下内边距，第二个值代表左右内边距。
当同时写了4个值时，分别代表上、右、下、左四个内边距，也就是从上开始，顺时针的顺序。
5. 小结
内边距、外边距的使用都很频繁，因为我们要控制距离，才能让网页显得错落有致。
京公网安备 11010802041100号