龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

CSS教程之:CSS内间距

时间:2009-12-21 11:47来源:未知 作者:admin 点击:
分享到:
通过padding属性,我们可以设置在元素的边框和内容之间的间距。 通过使用如下属性,你可以设置不同的内间距: padding-bottom : 设置底部内间距 padding-top : 设置顶部内间距 padding-left : 设
通过padding属性,我们可以设置在元素的边框和内容之间的间距。

通过使用如下属性,你可以设置不同的内间距:
padding-bottom : 设置底部内间距
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>
精彩图集

赞助商链接