小白教程
所有教程
关于
Search
172.70.131.129
172.70.131.129
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS padding(填充)”的源代码
本页内容
上一节:
CSS_margin(外边距)
下一节:
CSS_分组和嵌套
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS padding(填充)}}[[Category:CSS 教程|16]] = CSS padding(填充) = CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。 == padding(填充) == 当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。 == 可能的值 == {| class="table table-striped table-hover" ! 值 ! 说明 |- | length | 定义一个固定的填充(像素, pt, em,等) |- | % | 使用百分比值定义一个填充 |} == 填充- 单边内边距属性 == 在CSS中,它可以指定不同的侧面不同的填充: <sample title="" desc="" lang="html" hererun="1"> padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p { background-color:yellow; } p.padding { padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; } </style> </head> <body> <p>这是一个没有指定填充边距的段落。</p> <p class="padding">这是一个指定填充边距的段落。</p> </body> </html> </run> * 上内边距是 25px * 右内边距是 50px * 下内边距是 25px * 左内边距是 50px == 填充 - 简写属性 == 为了缩短代码,它可以在一个属性中指定的所有填充属性。 这就是所谓的简写属性。所有的填充属性的简写属性是 padding : <sample title="" desc="" lang="html" hererun="1"> padding:25px 50px; </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> p { background-color:yellow; } p.padding { padding:25px 50px; } </style> </head> <body> <p>这是一个没有指定填充边距的段落。</p> <p class="padding">这是一个指定填充边距的段落。</p> </body> </html> </run> Padding属性,可以有一到四个值。 ''' padding:25px 50px 75px 100px;''' * 上填充为25px * 右填充为50px * 下填充为75px * 左填充为100px ''' padding:25px 50px 75px;''' * 上填充为25px * 左右填充为50px * 下填充为75px ''' padding:25px 50px;''' * 上下填充为25px * 左右填充为50px ''' padding:25px;''' * 所有的填充都是25px == 更多实例 == [[try.php?filename=trycss_padding|在一个声明中的所有填充属性]] 这个例子演示了使用简写属性设置在一个声明中的所有填充属性,可以有一到四个值。 [[try.php?filename=trycss_padding left|设置左部填充]] 这个例子演示了如何设置元素左填充。 [[try.php?filename=trycss_padding right|设置右部填充]] 这个例子演示了如何设置元素右填充。. [[try.php?filename=trycss_padding top|设置上部填充]] 这个例子演示了如何设置元素上填充。 [[try.php?filename=trycss_padding bottom|设置下部填充]] 这个例子演示了如何设置元素下填充。 == 所有的CSS填充属性 == {| class="table table-striped table-hover" ! 属性 ! 说明 |- | [[pr padding|padding]] | 使用简写属性设置在一个声明中的所有填充属性 |- | [[pr padding bottom|padding-bottom]] | 设置元素的底部填充 |- | [[pr padding left|padding-left]] | 设置元素的左部填充 |- | [[pr padding right|padding-right]] | 设置元素的右部填充 |- | [[pr padding top|padding-top]] | 设置元素的顶部填充 |}
返回至“
CSS padding(填充)
”。
上一节:
CSS_margin(外边距)
下一节:
CSS_分组和嵌套