CSS 内边距 (padding) 实例
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS 内边距属性
属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
###################
1.所有填充属性在一个声明中
本例演示使用简写属性将所有的填充属性设置于一个声明中，可以有一到四个值。
<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">
这个表格单元的每个边拥有相等的内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格的上和下内边距是 0.5 cm, 左和右内边距是2.5
</td>
</tr>
</table>
</body>
2.设置下内边距 1
本例演示如何使用厘米值来设置单元格的下内边距。
<style type="text/css">
td{padding-bottom:2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
这个是表格单元拥有下午内边距。
</td>
</tr>
</table>
</body>
3.设置下内边距 2
本例演示如何使用百分比值来设置单元格的下内边距。
<style type="text/css">
td{padding-bottom: 10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
这个表格单元拥有下内边距。
</td>
</tr>
</table>
4.设置左内边距 1
本例演示如何使用厘米值来设置单元格的左内边距。
<style type="text/css">
td{padding-left:2cm
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
这个表格单元拥有左内边距。
</td>
</tr>
</table>
5.设置左内边距 2
本例演示如何使用百分比值来设置单元格的左内边距。
<style type="text/css">
td{padding-left: 10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
这个表格拥有左内边距。
</td>
</tr>
</table>
6.设置右内边距 1
本例演示如何使用厘米值来设置单元格的右内边距。
<style type="text/css">
td{padding-right:5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
这个表格单元拥有右内边距。
</td>
</tr>
</table>
7.设置右内边距 2
本例演示如何使用百分比值来设置单元格的右内边距。
<style type="text/css">
td{padding-right:10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
这个表格单元拥有右内边距。
</td>
</tr>
</table>
</body>
8.设置上内边距 1
本例演示如何使用厘米值来设置单元格的上内边距。
<style type="text/css">
td{padding-top:2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
这个表格单元拥有上内边距。
</td>
</tr>
</table>
9.设置上内边距 2
本例演示如何使用百分比值来设置单元格的上内边距。
<style type="text/css">
td{padding-top:10%}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
这个表格单元拥有上内边距。
</td>
</tr>
</table>
</body>