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>
CSS 內邊距 (padding) 實例
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。