CSS 内边距 padding
2014-02-20 14:49
274 查看
讲解一、
定义和用法:padding 简写属性在一个声明中设置所有内边距属性。说明:这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释:不允许使用负值。
默认值:0
继承性:no
版本:CSS1
JavaScript 语法:object.style.padding="10px 5px"
例子 1
padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px
例子 2
padding:10px 5px 15px;
上内边距是 10px
右内边距和左内边距是 5px
下内边距是 15px
例子 3
padding:10px 5px;
上内边距和下内边距是 10px
右内边距和左内边距是 5px
例子 4
padding:10px;
所有 4 个内边距都是 10px
实例
设置 p 元素的 4 个内边距:p{
padding:2cm 4cm 3cm 4cm;}
浏览器支持
所有浏览器都支持 padding 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
讲解二、
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
例如,如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性
也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:padding-top
padding-right
padding-bottom
padding-left
您也许已经想到了,下面的规则实现的效果与上面的简写规则是完全相同的:
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
内边距的百分比数值
前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。
下面这条规则把段落的内边距设置为父元素 width 的 10%:p {padding: 10%;}
例如:如果一个段落的父元素是 div 元素,那么它的内边距要根据 div 的 width 计算。
<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>
注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。
讲解三、
HTML DOM padding 属性
定义和用法padding 属性设置元素的内边距。
padding 属性定义元素边框与元素内容之间的空间。
该属性可采取 4 个值:
如果规定一个值,比如 div {padding: 50px} - 所有四个边的 padding 都是 50 px。
如果规定两个值,比如 div {padding: 50px 10px} - 上下内边距是 50 px,左右内边距是 10 px。
如果规定三个值,比如 div {padding: 50px 10px 20px}-上内边距是 50px,左右内边距是 10 px,下内边距是20px。
如果规定四个值,比如 div {padding: 50px 10px 20px 30px} - 上内边距是 50 px,右内边距是 10 px,下内边距是 20 px,左内边距是 30 px。
语法:
Object.style.padding=padding
Possible Values
padding设置内边距。
值可以是:
百分比(基于父对象总高度或宽度的百分比)
长度值(定义一个固定的边距)
auto(浏览器设定的值)。
实例
本例改变元素的内边距:
Code <html> <head> <style type="text/css"> p { border: thin dotted #FF0000; } </style> <script type="text/javascript"> function changePadding() { document.getElementById("p1").style.padding="2cm"; } </script> </head> <body> <input type="button" onclick="changePadding()" value="Change padding" /> <p id="p1">This is a paragraph</p> </body> </html>
相关文章推荐
- W3School-CSS 内边距 (padding) 实例
- CSS 内边距padding ,外边距margin
- CSS padding 属性有1、2、3、4个值时内边距为多少?
- CSS里,边距(Margin),边框样式(border),空白(Padding)的相关参数
- css之去除html标签默认的外边距margin和内边距padding
- css中内边距是padding,外边距是margin
- CSS边距属性定义是用margin还是用padding的两者对比
- CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系
- CSS中的外边距margin与内边距padding的用法
- CSS 内边距 padding
- CSS中的框模型(box model)/margin、padding、border介绍/ 外边距层叠collapsing计算
- 图解 CSS (3): padding(内边距)、margin(外边距)
- Css 图解margin 和 padding 的区别
- CSS布局奇淫巧计之-强大的负边距
- CSS中边框使用负边距值的奇技淫巧
- CSS元素的补白属性padding
- css 上下边距,外边距,负边剧
- CSS 负边距自适应布局
- CSS_负边距
- css margin padding 四个方向