点此查看 所有教程、项目、源码导航
本文目录
- 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内边距也支持简写属性:
/* 上下左右边距均设置为10px */
padding: 10px;
/* 上下10px 左右20px */
padding: 10px 20px;
/* 上、右、下、左分别为1px 2px 3px 4px */
padding: 1px 2px 3px 4px;
也就是说,当只写一个值时,代表同时为4个边设置同样的内边距。
当写两个值时,第一个值代表上下内边距,第二个值代表左右内边距。
当同时写了4个值时,分别代表上、右、下、左四个内边距,也就是从上开始,顺时针的顺序。
5. 小结
内边距、外边距的使用都很频繁,因为我们要控制距离,才能让网页显得错落有致。
更多推荐
零基础CSS入门教程(16)–内边距
发布评论