所有的 HTML 元素本質(zhì)上是小的矩形塊，代表著某一小塊區(qū)域。

有三個(gè)影響HTML元素布局的重要屬性：padding(內(nèi)邊距)、margin(外邊距)、border(邊框)。

元素的padding控制元素內(nèi)容content和元素邊框border之間的距離。

在這兒，我們可以看到綠方塊和紅方塊都位于黃方塊之中，但是紅方塊比綠方塊具有更大的padding。

當(dāng)你加大綠方塊的padding, 它將擴(kuò)大元素內(nèi)容和元素邊框的距離。

元素的外邊距margin控制元素邊框border和元素實(shí)際所占空間的距離。

在這兒，我們可以看到綠方塊和紅方塊都位于黃方塊之中，注意紅方塊比綠方塊具有更大的外邊距margin，使得它看起來更小。

當(dāng)你增大綠方塊的margin時(shí)，將會(huì)增加元素邊框和元素實(shí)際所占空間之間的距離。

元素的margin控制元素的border和元素實(shí)際所占空間的距離。如果你將一個(gè)元素的margin設(shè)置為負(fù)值，元素將會(huì)變大。

有時(shí)你想要自定義元素，使它的每一個(gè)邊具有不同的padding。CSS 允許你使用padding-top、padding-right、padding-bottom和padding-left來控制元素上右下左四個(gè)方向的padding。