CSS 内边距 padding

发布时间:2016-12-8 4:15:09 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"CSS 内边距 padding",主要涉及到CSS 内边距 padding方面的内容,对于CSS 内边距 padding感兴趣的同学可以参考一下。

讲解一、 定义和用法: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>

上一篇:CSS 外边距 margin
下一篇:一瓢江湖我沉浮 我寻你千百度 又一岁荣枯

相关文章

相关评论