首页 > 开发 > CSS > 正文

CSS 内边距

2020-03-24 17:16:13
字体:
来源:转载
供稿:网友

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。

CSS padding 属性定义元素边框与元素内容之间的空白区域。


CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。

例如,如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:

h1 {padding: 10px;}

您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:

h1 {padding: 10px 0.25em 2ex 20%;}

前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。

下面这条规则把段落的内边距设置为父元素 width 的 10%:

p {padding: 10%;}

例如:如果一个段落的父元素是 div 元素,那么它的内边距要根据 div 的 width 计算。

 div >

注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。


所有内边距属性在一个声明中本例演示使用简写属性将所有的内边距属性设置于一个声明中,可以有一到四个值。设置下内边距 1本例演示如何使用厘米值来设置单元格的下内边距。设置下内边距 2本例演示如何使用百分比值来设置单元格的下内边距。设置左内边距 1本例演示如何使用厘米值来设置单元格的左内边距。设置左内边距 2本例演示如何使用百分比值来设置单元格的左内边距。设置右内边距 1本例演示如何使用厘米值来设置单元格的右内边距。设置右内边距 2本例演示如何使用百分比值来设置单元格的右内边距。设置上内边距 1本例演示如何使用厘米值来设置单元格的上内边距。设置上内边距 2本例演示如何使用百分比值来设置单元格的上内边距。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

上一篇:CSS 类选择器

下一篇:CSS 注意事项

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表