閱讀(10.3k) 書簽贊(4) 我要糾錯(cuò)

CSS Padding填充

2018-10-30 11:37 更新

Padding填充添加元素的內(nèi)容和其邊框之間的空間。

您可以為單個(gè)邊緣設(shè)置填充，或使用縮寫padding屬性在單個(gè)聲明中應(yīng)用值。

填充屬性如下所列。

padding-top
設(shè)置頂邊的填充。
Value: length or %
padding-right
設(shè)置右邊的填充。
Value: length or %
padding-bottom
設(shè)置底邊的填充。
Value: length or %
padding-left
設(shè)置左邊的填充。
Value: length or %
padding
此簡寫屬性在單個(gè)聲明中設(shè)置所有邊的填充。
Value: 1 - 4 length or % values

當(dāng)使用百分比值指定填充時(shí)，百分比始終從包含塊的寬度導(dǎo)出。

以下代碼將Padding應(yīng)用于元素。

<!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屬性可以有一到四個(gè)值。

你可以使用padding shorthand屬性來設(shè)置在單個(gè)聲明中填充所有四個(gè)邊。

您可以為此屬性指定一到四個(gè)值。

當(dāng)提供四個(gè)值時(shí)，它們用于設(shè)置填充分別用于頂部，右側(cè)，底部和左側(cè)。

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	設(shè)置底部的填充	1
padding-left	設(shè)置左邊填充	1
padding-right	設(shè)置右邊填充	1
padding-top	設(shè)置頂部填充	1
padding	填充縮寫屬性設(shè)置	1

CSS Padding填充

Padding填充添加元素的內(nèi)容和其邊框之間的空間。

Padding簡寫

相關(guān)屬性

推薦文章

推薦教程

推薦課程

Padding填充添加元素的內(nèi)容和其邊框之間的空間。