最近覺得，我學(xué)CSS學(xué)得太不細(xì)致了，margin、padding這些天天都在用的屬性，我卻沒有真正了解它們、掌握它們。今天，就對(duì)這兩個(gè)屬性做一個(gè)細(xì)致的總結(jié)吧！
文章結(jié)構(gòu)：
- 塊級(jí)元素的padding、margin
- 行內(nèi)元素的padding、margin
- padding使用的小技巧
- 總結(jié)
一、塊級(jí)元素的padding、margin
首先我們來看MDN對(duì)margin取值的解釋：
我們?cè)倏?a target="_blank" rel="nofollow">MDN對(duì)padding取值的解釋：
我們只看取值為<percentage>（即<百分比>）的情況。文檔說道：當(dāng)margin和padding取百分比的時(shí)候，該百分比都是相對(duì)于包含該元素的塊的寬度（相對(duì)于該塊的百分比）。
對(duì)于這句話，有兩個(gè)特別重要的要點(diǎn)需要掌握。
1、要點(diǎn)一
按照慣性思維來說，假如我設(shè)置子元素的margin/padding-left/right為n%，那么子元素的margin/padding-left/right=父元素寬度 * n%；設(shè)置子元素的margin/padding-top/bottom為n%，那么子元素的margin/padding-top/bottom=父元素高度 * n%。嗯，之前我也是這么認(rèn)為的 ······T^T
實(shí)際上，不管設(shè)置margin/padding-top/bottom/left/right，子元素的margin/padding-top/bottom/left/right=父元素寬度 * n%。
我們先看margin：
//html
<body>
<div class='parent'>
11
<div class='child'></div>
</div>
</body>
// css
.parent{
width:400px;
height:200px;
background:#ddd;
margin-top:10px;
}
.child{
width:200px;
height:100px;
background:pink;
margin-left:100%;
margin-top:100%;
}
結(jié)果：
你看，.child的margin-top是400px而非200px。
我們?cè)倏磒adding：
//html
<body>
<div class='parent'>
11
<div class='child'>
22
</div>
</div>
</body>
// css
.parent{
width:400px;
height:200px;
background:#ddd;
margin-top:10px;
}
.child{
width:200px;
height:100px;
background:pink;
padding-left:100%;
padding-top:100%;
}
結(jié)果：
你看，.child的padding-top是400px而非200px。
總結(jié)：塊級(jí)元素的padding和margin取百分比值的時(shí)候，都是相對(duì)于父元素的寬度來計(jì)算的。
2、要點(diǎn)二
根據(jù)要點(diǎn)一我們知道：<percentage>都是相對(duì)于父元素的寬度來計(jì)算的。
由此又出現(xiàn)了另外一個(gè)問題：父元素的寬度具體指什么呢？?jī)H僅包含父元素的內(nèi)容區(qū)域（即box-sizing:content-box）？還是包括父元素的padding、border（即box-sizing:border-box）?甚至包含父元素的margin？
在要點(diǎn)一的解釋中，我沒有給父元素設(shè)置padding/border/margin，就是為了消除這三個(gè)屬性給父元素寬度帶來的影響?，F(xiàn)在，我們就重點(diǎn)來看這三個(gè)屬性給父元素寬度帶來的影響。
直接上代碼：
// html
<body>
<div class='parent'>
11
<div class='child'>
22
</div>
</div>
</body>
// css
.parent{
width:400px;
height:200px;
background:#ddd;
margin-top:100px;
margin-left:100px;
padding-top:100px;
padding-left:100px;
border:100px solid yellow;
}
.child{
width:200px;
height:100px;
background:pink;
padding-left:100%;
padding-top:100%;
}
結(jié)果：
.child的padding和margin仍為400px，即父元素內(nèi)容區(qū)域?qū)挾?/strong>。
在上面的測(cè)試中，我們沒有對(duì)box-sizing進(jìn)行設(shè)置，因此默認(rèn)的box-sizing為content-box。下面，我們?cè)O(shè)置box-sizing:border-box，再來看結(jié)果：
// html
<body>
<div class='parent'>
11
<div class='child'>
22
</div>
</div>
</body>
// css
*{
box-sizing:border-box;
}
.parent{
width:500px;
height:400px;
background:#ddd;
margin-top:100px;
margin-left:100px;
padding-top:100px;
padding-left:100px;
border:100px solid yellow;
}
.child{
width:300px;
height:300px;
background:pink;
padding-left:100%;
padding-top:100%;
}
為了方便觀察，我們改變父元素的寬度為500px、高度為400px；改變子元素的寬度為300px、高度為300px。結(jié)果如下：
.child的padding和margin仍為200px，即父元素內(nèi)容區(qū)域?qū)挾?/strong>。
總結(jié)：子元素的padding、margin的百分比取值都是相對(duì)于父元素的內(nèi)容區(qū)域?qū)挾?/strong>來計(jì)算的。
二、行內(nèi)元素的padding、margin
首先我們將行內(nèi)元素的padding設(shè)置為數(shù)值：
// html
<body>
<div>
aaa
<span>xxyy</span>
sssssssssssssssssssssssssssssssssssssssssssssssssssss
</div>
</body>
// css
body{
word-break:break-all;
}
div{
width:400px;
height:200px;
background:#ddd;
padding-top:150px;
}
span{
border:1px solid blue;
background:pink;
padding-left:100px;
padding-right:100px;
padding-top:100px;
padding-bottom:100px;
}
結(jié)果：
由圖可知，inline元素可以設(shè)置padding-left/right/top/bottom，但是設(shè)置padding-top/bottom不改變布局，因而設(shè)置padding-top/bottom無效；同時(shí)我們看到，inline元素的background區(qū)域 = content + padding區(qū)域。
我們將上述span中的padding全部改為margin：
// css
span{
border:1px solid blue;
background:pink;
margin-left:100px;
margin-right:100px;
margin-top:100px;
margin-bottom:100px;
}
結(jié)果：
我們得到了相同的結(jié)論，margin-left/right生效了，但margin-top/bottom沒有生效。
我們將行內(nèi)元素的padding設(shè)置為百分比：
// html
<body>
<div>
aaa
<span>xxyy</span>
tttttsssssssuuuuuuzzzzzzzyyyyyyyhhhhhhh
</div>
</body>
// css
body{
word-break:break-all;
}
div{
width:300px;
height:200px;
background:#ddd;
}
span{
border:1px solid blue;
background:pink;
padding-left:100%;
padding-bottom:100%;
}
結(jié)果：
由圖可知，padding-left/bottom相同，均為300px。（同塊狀元素）
總結(jié)：
1、inline元素設(shè)置padding/margin-left/right生效，但padding/margin-top/bottom不生效；inline元素的高度由字體和行高決定。
2、inline元素的background區(qū)域 = content區(qū)域 + padding區(qū)域。
3、inline元素的padding、margin的百分比取值也是相對(duì)于父元素的內(nèi)容區(qū)域?qū)挾?/strong>來計(jì)算的。
三、padding使用的小技巧
我們對(duì)padding的使用做一個(gè)小拓展，用padding做一個(gè)正方形。代碼如下：
// html
<body>
<div class='parent'>
<div class='child'></div>
</div>
</body>
// css
*{
box-sizing:border-box;
}
.parent{
margin:100px auto;
background:#ddd;
padding:100px;
}
.child{
height:0;
background:pink;
padding-top:100%;
overflow:hidden;
position:relative;
}
結(jié)果：
.child就是我們需要的正方形。這個(gè)正方形是怎么做出來的呢？重點(diǎn)就是.child中的height:0;padding-top:100%;。設(shè)置"padding-top:100%"使.child的padding-top與
父元素的寬度相等，而子元素又繼承了父元素的寬度，所以子元素的padding-top與子元素的寬度相等，因此構(gòu)成了一個(gè)正方形。
由此，我們可以設(shè)計(jì)各種比例的長(zhǎng)方形，只需改變子元素的padding-top的百分比即可。
有了上面的鋪墊后，我們來做一個(gè)寬高固定為2:1的img（但是不知道img寬高的具體數(shù)值）。代碼如下：
// html
<body>
<div class='parent'>
<div class='child'>
</div>
</div>
</body>
// css
*{
box-sizing:border-box;
}
.parent{
margin:100px auto;
background:#ddd;
padding:100px;
}
.child{
height:0;
background:pink;
padding-top:50%;
overflow:hidden;
position:relative;
}
.child>img{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
結(jié)果：
分析：由于.child的height為0，并且設(shè)置了"overflow:hidden"，所以.child無論添加什么元素都無法顯示（因?yàn)楸籬idden了）。這時(shí)，對(duì)要顯示的img設(shè)置絕對(duì)定位，并把img覆蓋整個(gè).child，就使img的寬高為2:1。
這樣，在不知道img具體尺寸的情況下，做出了一個(gè)寬高比為2:1的img圖片。
四、總結(jié)
對(duì)于padding、margin這些屬性，行內(nèi)元素和塊狀元素的相同點(diǎn)：
- padding、margin的百分比取值都是相對(duì)于父元素的內(nèi)容區(qū)域?qū)挾?/strong>來計(jì)算的。
- background區(qū)域 = content區(qū)域 + padding區(qū)域。
行內(nèi)元素和塊狀元素的不同點(diǎn)：
- 行內(nèi)元素設(shè)置padding/margin-top/bottom不生效。
- margin可為負(fù)值，但padding不可為負(fù)。
另，margin還存在一個(gè)“margin合并”的問題，我在博客margin合并中也進(jìn)行了相應(yīng)的整理。
由于個(gè)人水平有限，博客錯(cuò)誤之處，煩請(qǐng)指正！
