css内边距(填充)之padding属性的用法笔记

原创 PHP笔记  2017-03-25 18:24  阅读 1,789 views 次

html元素的边框和内容区之间就是内边距,我们一般用css属性(padding)来控制这个区域。

css padding属性

css padding属性定义元素边框与元素内容之间的空白区域,即内边距,有些地方称之为填充。padding属性的属性值可以是长度值和百分比值。

padding属性可以同时给html元素设置内边距,格式和margin属性相同。

例如:给h1元素设置内边距,代码如下:

h1 {padding: 5px;}/*上下左右内边距都为5px*/
h1 {padding: 5px 6px;}/*上下内边距为5px,左右内边距都为6px*/
h1 {padding: 5px 6px 7px;}/*上内边距为5px,下内边距为7px,左右内边距都为6px*/
h1 {padding: 5px 6px 7px 10px;}/*上右下左内边距分别为:5px、6px 、7px、10px;*/

 

css单边设置内边距属性

通过以上属性你可以只给元素的一边设置内边距。

例如:给h1元素的上方设置内边距,代码如下:

h1 {padding-top: 5px;}

 

padding内边距的百分比

padding的属性的属性值可以是百分比,百分数值是相对于某元素的宽度而言的,如果该元素的宽度改变,那么内边距也会随之改变。上下内边距的百分比都是相对于某元素的宽度,而并不是相对于高度的(这里的“某元素”一般是父元素)。

实例:

......
<body>
<style type="text/css">
div{width:500px;border:1px solid red;}
p {padding:10%;}
</style>
<div><p>padding内边距的百分比</p></div>
</body>
.......

运行结果:

说明:p元素的内边距会根据父元素div的宽度变化而变化。

本文地址:https://www.ggbiji.com/css-padding.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情