這篇文章主要介紹了css中margin和padding有哪些區(qū)別，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

10年積累的網(wǎng)站制作、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有金昌免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

區(qū)別：margin是指從自身邊框到另一個(gè)容器邊框之間的距離，即容器外距離，是隔開(kāi)元素與元素的間距；而padding是指自身邊框到自身內(nèi)部另一個(gè)容器邊框之間的距離，即可容器內(nèi)距離，是盒子邊框與盒子內(nèi)部元素的距離。

css盒子模型（Box Model）

談到margin和padding，我們不可回避地要談到css盒子模型（Box Model）。

一般而言，css盒子模型是用來(lái)設(shè)計(jì)和布局的。它本質(zhì)上是一個(gè)盒子，包括：外邊距（margin）、邊框（border）、內(nèi)邊距（padding）以及最中間的內(nèi)容（content）。推薦：css視頻教程

下圖即為盒子模型（這里只談W3C規(guī)范的標(biāo)準(zhǔn)盒模型，而不談IE5和IE6在怪異模式中使用的非標(biāo)準(zhǔn)的盒子模型）：

margin和padding

margin是指從自身邊框到另一個(gè)容器邊框之間的距離，就是容器外距離；即外邊距。

padding是指自身邊框到自身內(nèi)部另一個(gè)容器邊框之間的距離，就是容器內(nèi)距離；即內(nèi)邊距。

margin和padding的區(qū)別

margin是盒子的外邊距，即盒子與盒子之間的距離，而padding是內(nèi)邊距，是盒子的邊與盒子內(nèi)部元素的距離。

（margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。margin用于布局，可以分開(kāi)元素，使元素與元素互不相干；padding用于設(shè)置元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。）

語(yǔ)法結(jié)構(gòu)

（1）padding-left:10px; /margin-left:10px;　　　　　　　  　　左內(nèi)/外邊距

（2）padding-right:10px; /margin-right:10px; 　　　　　　　　右內(nèi)/外邊距

（3）padding-top:10px; /margin-top:10px; 　　　　　　   　　上內(nèi)/外邊距

（4）padding-bottom:10px; /margin-bottom:10px;           　　下內(nèi)/外邊距

（5）padding：10px;/ margin:10px; 　　                       　　  四邊統(tǒng)一內(nèi)/外邊距

（6）padding:10px 20px; /margin:10px 20px; 　　　　　　　　 上下、左右內(nèi)/外邊距

（7）padding:10px 20px 30px;/margin:10px 20px 30px; 　　     上、左右、下內(nèi)/外邊距

（8）padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左內(nèi)/外邊距

margin的用法說(shuō)明:

（1）需要在border外側(cè)添加空白時(shí)，

（2）空白處不需要有背景（色）時(shí)，

（3）上下相連的兩個(gè)盒子之間的空白需要相互抵消時(shí)，比如15px+20px的margin，將得到20px的空白。

padding的用法說(shuō)明:

（1）需要在border內(nèi)側(cè)添加空白時(shí)（往往是文字與邊框距離的設(shè)置），

（2）空白處需要背景（色）時(shí)，

（3）上下相連的兩個(gè)盒子之間的空白希望等于兩者之和時(shí)，比如15px+20px的padding，將得到35px的空白。

關(guān)于padding：

注意：將Padding設(shè)置為負(fù)值無(wú)效：

在塊元素中：

因此，padding在塊級(jí)元素下，上下左右可以隨意設(shè)定，會(huì)對(duì)元素內(nèi)部發(fā)生改變。

在內(nèi)聯(lián)元素中：

行內(nèi)非替換元素上設(shè)置的內(nèi)邊距不會(huì)影響行高計(jì)算；因此，如果一個(gè)元素既有內(nèi)邊距又有背景，從視覺(jué)上看可能會(huì)延伸到其他行，有可能還會(huì)與其他內(nèi)容重疊。元素的背景會(huì)延伸穿過(guò)內(nèi)邊距。不允許指定負(fù)邊距值，行內(nèi)元素的padding元素，只有padding-left和padding-right有效果，上下不識(shí)別；

關(guān)于margin：

margin：0 auto；  只對(duì)塊級(jí)元素起作用

在塊元素中：

因此，margin在塊級(jí)元素下，上下左右可以隨意設(shè)定。且塊級(jí)元素的margin的參照基準(zhǔn)是前一個(gè)元素即相對(duì)于自身之前的

元素有margin距離。如果元素是第一個(gè)元素，則就是相對(duì)于父元素的margin距離。

在內(nèi)聯(lián)元素中：

margin-top和margin-bottom對(duì)內(nèi)聯(lián)元素（對(duì)行）的高度沒(méi)有影響，如果你要改變內(nèi)聯(lián)元素的行高即類似文本的行間距，那

么你只能使用這三個(gè)屬性：line-height，fong-size，vertical-align。請(qǐng)記住，這個(gè)影響內(nèi)聯(lián)元素高度的是line-height而不是height。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css中margin和padding有哪些區(qū)別”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!