所有的 HTML 元素本質(zhì)上是小的矩形塊岖常,代表著某一小塊區(qū)域顿膨。
有三個影響HTML元素布局的重要屬性:padding(內(nèi)邊距)髓绽、margin(外邊距)敛苇、border(邊框)。
元素的padding控制元素內(nèi)容content和元素邊框border之間的距離顺呕。
在這兒枫攀,我們可以看到綠方塊和紅方塊都位于黃方塊之中,但是紅方塊比綠方塊具有更大的padding塘匣。
當(dāng)你加大綠方塊的padding, 它將擴(kuò)大元素內(nèi)容和元素邊框的距離脓豪。
元素的外邊距margin控制元素邊框border和元素實際所占空間的距離。
在這兒忌卤,我們可以看到綠方塊和紅方塊都位于黃方塊之中扫夜,注意紅方塊比綠方塊具有更大的外邊距margin,使得它看起來更小。
當(dāng)你增大綠方塊的margin時笤闯,將會增加元素邊框和元素實際所占空間之間的距離堕阔。
元素的margin控制元素的border和元素實際所占空間的距離。如果你將一個元素的margin設(shè)置為負(fù)值颗味,元素將會變大超陆。
有時你想要自定義元素,使它的每一個邊具有不同的padding浦马。CSS 允許你使用padding-top时呀、padding-right、padding-bottom和padding-left來控制元素上右下左四個方向的padding晶默。