CSS填充

如何在CSS中使用填充

paddingCSS屬性通常在CSS中用於在元素內側添加空間。

記住:

  • margin在元素邊界外添加空間
  • padding在元素邊框內添加空間

特定的填充屬性

padding具有4個相關屬性,可同時更改單個邊的填充:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

這些的用法非常簡單,不能混淆,例如:

padding-left: 30px;
padding-right: 3em;

使用padding速記

padding是同時指定多個填充值的簡寫形式,並且根據輸入的值的數量,其行為會有所不同。

1個值

使用單個值可將其應用於全部填充物:頂部,右側,底部,左側。

padding: 20px;

2個值

使用2個值將第一個應用於底部和頂部,第二個左右

padding: 20px 10px;

3個值

使用3個值將第一個應用於最佳,第二個左右,第三個底部

padding: 20px 10px 30px;

4個值

使用4個值將第一個應用於最佳,第二個正確的,第三個底部,第四個剩下

padding: 20px 10px 5px 0px;

所以,順序是右上-左下

接受值

padding接受以任何長度單位表示的值,最常見的是px,em,rem,但是存在許多其他

免費下載我的CSS手冊


更多CSS教程: