船长 发表于 2009-05-25 10:06 | 分类:css | 阅读数:449 次
CSS填充属性定元素边框到内部内容间的距离
设置左填充 Set the left padding
This example demonstrates how to set the left padding of a tablecell.
Examples 实例:
<html>
<head>
<style type=”text/css”>
td {padding-left: 2cm}
</style>
</head>
<body>
<table border=”1″>
<tr>
<td>
This is a tablecell with a left padding. www.xsheji.com.cn . This is a tablecell with a left padding.
</td>
</tr>
</table>
</body>
</html>
设置右填充 Set the right padding
This example demonstrates how to set the right padding of a tablecell.
Examples 实例:
<html>
<head>
<style type=”text/css”>
td {padding-right: 5cm}
</style>
</head>
<body>
<table border=”1″>
<tr>
<td>
This is a tablecell with a right padding. www.xsheji.com.cn . This is a tablecell with a right padding.
</td>
</tr>
</table>
</body>
</html>
设置上填充 Set the top padding
This example demonstrates how to set the top padding of a tablecell.
Examples 实例:
<html>
<head>
<style type=”text/css”>
td {padding-top: 2cm}
</style>
</head>
<body>
<table border=”1″>
<tr>
<td>
This is a tablecell with a top padding
www.xsheji.com.cn
</td>
</tr>
</table>
</body>
</html>
设置底部填充 Set the bottom padding
This example demonstrates how to set the bottom padding of a tablecell.
Examples 实例:
<html>
<head>
<style type=”text/css”>
td {padding-bottom: 2cm}
</style>
</head>
<body>
<table border=”1″>
<tr>
<td>
This is a tablecell with a bottom padding
www.xsheji.com.cn
</td>
</tr>
</table>
</body>
</html>
快速设置所有填充属性 All the padding properties in one declaration
This example demonstrates a shorthand property for setting all of the padding properties in one declaration, can have from one to four values.
Examples 实例:
<html>
<head>
<style type=”text/css”>
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border=”1″>
<tr>
<td class=”test1″>
This is a tablecell with equal padding on each side.
</td>
</tr>
</table>
<br>
<table border=”1″>
<tr>
<td class=”test2″>
This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.
</td>
</tr>
</table>
</body>
</html>
可用padding属性快速设置各方向填充的属性