CSS Padding填充
Padding填充添加元素的內容和其邊框之間的空間。
您可以為單個邊緣設置填充,或使用縮寫padding屬性在單個聲明中應用值。
填充屬性如下所列。
- padding-top
設置頂邊的填充。
Value: length or % - padding-right
設置右邊的填充。
Value: length or % - padding-bottom
設置底邊的填充。
Value: length or % - padding-left
設置左邊的填充。
Value: length or % - padding
此簡寫屬性在單個聲明中設置所有邊的填充。
Value: 1 - 4 length or % values
當使用百分比值指定填充時,百分比始終從包含塊的寬度導出。
以下代碼將Padding應用于元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
border: 10px double black;
background-color: lightgray;
background-clip: content-box;
padding-top: 0.5em;
padding-bottom: 0.3em;
padding-right: 0.8em;
padding-left: 0.6em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</body>
</html>
Padding簡寫
padding屬性可以有一到四個值。
你可以使用padding shorthand屬性來設置在單個聲明中填充所有四個邊。
您可以為此屬性指定一到四個值。
當提供四個值時,它們用于設置填充分別用于頂部,右側,底部和左側。
padding: 2px 5px 7px 9px; top padding is 2px right padding is 5px bottom padding is 7px left padding is 9px padding: 2px 5px 7px; top padding is 2px right and left paddings are 5px bottom padding is 7px padding: 2px 5px; top and bottom paddings are 2px right and left paddings are 5px padding: 2px; all four paddings are 2px
相關屬性
屬性 | 描述 | CSS |
---|---|---|
padding-bottom | 設置底部的填充 | 1 |
padding-left | 設置左邊填充 | 1 |
padding-right | 設置右邊填充 | 1 |
padding-top | 設置頂部填充 | 1 |
padding | 填充縮寫屬性設置 | 1 |