下面給大家講解的是css代碼中margin屬性和padding屬性的區(qū)別，下面來詳細(xì)給大家講解下。

css代碼中Margin和padding屬性的區(qū)別：

margin：指的是邊框以外的留白；
padding：指的是邊框與圖文內(nèi)容之間的留白；
總結(jié)，margin屬性設(shè)置的是外邊距，padding屬性設(shè)置的為內(nèi)邊距。

1、Margin屬性

Margin屬性包括有margin-top、margin-right、margin-bottom、margin-left，這個(gè)屬性主要控制的是邊框之外的的留白，如果Margin屬性上右下左margin值均為40px，可將代碼設(shè)置為：
margin-top: 40px;
margin-right: 40px;
margin-bottom: 40px;
margin-left: 40px;
根據(jù)上, 右, 下, 左的順時(shí)針規(guī)則, Margin屬性可簡寫為margin: 40px 40px 40px 40px;
如果上下，左右的margin屬性值是一樣的，那到就可以將margin屬性的CSS代碼寫成margin: 40px 40px;，第一個(gè)40px代表的是上下的margin屬性值，后一個(gè)40px代表的是左右的margin屬性值；
當(dāng)上下左右的margin屬性值都相同，那么margin屬性值可以簡寫為margin: 40px;

2、Padding屬性

Padding屬性包括有padding-top、padding-right、padding-bottom、padding-left，這個(gè)元素主要控制的是邊框與圖文內(nèi)容之間的留白，Padding屬性值可參考以下的寫法。
例1：padding:10px 5px 15px 20px;
上內(nèi)邊距是 10px；
右內(nèi)邊距是 5px；
下內(nèi)邊距是 15px；
左內(nèi)邊距是 20px。
例2：padding:10px 5px 15px;
上內(nèi)邊距是 10px；
右內(nèi)邊距和左內(nèi)邊距是 5px；
下內(nèi)邊距是 15px。
例3：padding:10px 5px;
上內(nèi)邊距和下內(nèi)邊距是 10px；
右內(nèi)邊距和左內(nèi)邊距是 5px。
例4：padding:10px;
所有4個(gè)內(nèi)邊距都是 10px。