CSS學習之margin與padding

文章目錄

• 說明

CSS margin 屬性

margin 屬性是用於在一個聲明中設定四個外邊距的所有屬性的簡寫屬性。

說明

這個簡寫屬性設定一個元素所有外邊距的寬度，或者設定各邊上外邊距的寬度。

區塊層級元素的垂直相鄰外邊距會合并，而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負的外邊距值，不過使用時要小心。

 

 

四個邊距均為10px：

h1 {margin: 10px}

頂邊距和底邊距為10px，左邊距和右邊距是父元素寬度的2%：

h1 {margin: 10px 2%}

頂邊距為10px，左邊距和右邊距是父元素寬度的2%，底邊距是-10px：

h1 {margin: 10px 2% -10px}

頂邊距為10px，右邊距是父元素寬度的2%，底邊距是-10px，而左邊距由瀏覽器設定：

h1 {margin: 10px 2% -10px auto}

 

CSS padding 屬性

 

 

這個簡寫屬性設定元素所有內邊距的寬度，或者設定各邊上內邊距的寬度。行內非替換元素上設定的內邊距不會影響行高計算；因此，如果一個元素既有內邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他內容重疊。元素的背景會延伸穿過內邊距。不允許指定負邊距值。