盒子内边距
内边距是什么:
内边距在正文(content)外,边框(border)内。控制该区域最简单的属性是 padding 属性。padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
你可以进行统一的内边距设置,也可以进行单边的那边据设置: 例如,如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:
h1 {padding: 10px 0.25em 2ex 20%;}
如果只想设置某一边的那边据,我们也只可以办到的,只需通过以下四个属性:
padding-top
padding-right
padding-bottom
padding-left
顾名思义,这个是很好理解的。
在数值的设置中,我们前面讲到过,可以使用多种单位,常用的就是像素(px)和厘米(cm),这个比较简单,就简单的测试一下就好:
在 html 文件中写入一个表格,加上边框属性:
正文 |
这是未设置之前的页面:
下面我们在 CSS 文件中加入
h1 { padding-left: 5cm; padding-right: 5cm; padding-top: 30px; padding-bottom: 30px; }
HTML 代码更新为:
正文 |
下面就是效果截图:
我们可以看出,我们操作的区域,在正文以外,在边框以内.