詳介Margin與Padding的區別

大家知道Margin與Padding的區別嗎?下面我們就給大家詳細介紹一下吧!margin和padding用來隔開元素，margin是隔開元素與外邊，padding是隔開元素裡邊。說白了，一個是內部的距離，一個是外部的距離;padding：內邊距;margin：外邊距。

兩者都是代替表格最重要的作用->分割塊的好方法，區別在於Margin是不同的Tag間互相隔離的距離而Padding是同一元素中不同內容分割使用，這在表格中最看得清楚。尤其是當對一個區域加載了背景樣式之後，Padding下的內容背景色會發生改變，而Margin則不會有所改變。

margin的取值有：margin-top, margin-right, margin-bottom, margin-left

padding的取值有：padding-top, padding-right, padding-bottom, padding-left

簡寫法(舉例)：

四個邊距均為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}

相信大家已經學會Margin與Padding的區別了吧!感謝大家對我們網站的支持!

相關推薦：

Class與ID的區別是什麼