CSS教程之:CSS内间距
通过padding属性,我们可以设置在元素的边框和内容之间的间距。 通过使用如下属性,你可以设置不同的内间距: padding-bottom : 设置底部内间距 padding-top : 设置顶部内间距 padding-left : 设
通过padding属性,我们可以设置在元素的边框和内容之间的间距。
通过使用如下属性,你可以设置不同的内间距:
这些属性的值可以是指定的宽度,百分比,或者inherit. 如果指定为inherit, 那么此元素的内间距将于父元素一样。
下面我们看一下实际的例子.
padding-bottom属性:
padding-bottom属性用于设置元素的底部内间距。可选值为指定长度或百分比。
例子:
通过使用如下属性,你可以设置不同的内间距:
padding-bottom : 设置底部内间距
padding-top : 设置顶部内间距
padding-left : 设置左边内间距
padding-right : 设置右边内间距
padding : 一次性设置所有内间距
padding-top : 设置顶部内间距
padding-left : 设置左边内间距
padding-right : 设置右边内间距
padding : 一次性设置所有内间距
这些属性的值可以是指定的宽度,百分比,或者inherit. 如果指定为inherit, 那么此元素的内间距将于父元素一样。
下面我们看一下实际的例子.
padding-bottom属性:
padding-bottom属性用于设置元素的底部内间距。可选值为指定长度或百分比。
例子:
<p style="padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style="padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
其余三个属性:padding-top, padding-left, padding-right的使用方式与padding-bottom一样,只是设置的间距位置不一样。
Padding属性:
通过padding属性,我们可以一次性设置四个方向的内间距:
<p style="padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style="padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px,
left and right padding will be 2% of the total width of the document.
</p>
<p style="padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px,
left and right padding will be 2% of the total width of the document,
bottom padding will be 10px
</p>
<p style="padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px,
right padding will be 2% of the total width of the document,
bottom padding and top padding will be 10px
</p>
- 上一篇:CSS教程之:CSS列表
- 下一篇:CSS教程之:CSS光标
精彩图集
精彩文章