轉載聲明：此文章為轉載（略改動）切端，點擊查看原文缴渊。
如有侵權24小時內(nèi)刪除姨拥。聯(lián)系QQ：1522025433
參考資料：Inline elements and padding
今天寫一個導航欄時遇到了一個問題：行內(nèi)元素的padding-top，padding-bottom和margin-top,margin-bottom是不是真的是無效的足陨？
接下來就這個問題將具體分析：
1.行內(nèi)元素擁有盒子模型么？
答案是是的娇未。沒錯墨缘，行內(nèi)元素跟塊級元素一樣，同樣擁有盒子模型零抬。
2.行內(nèi)元素的padding-top镊讼，padding-bottom和margin-top,margin-bottom是否無效？
答案同樣是是的平夜。盒子模型的width蝶棋，height和padding-top，padding-bottom和margin-top,margin-bottom設置都是無效的忽妒。但是...
3.實戰(zhàn)探討行內(nèi)元素的padding-top玩裙，padding-bottom和margin-top,margin-bottom
先來看兩個實例：
example1：
源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example1 padding-top padding-bottom 有效果（應該沒有）</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
text-decoration:none;
list-style:none;
}
#main{
min-width:1280px;
background-color:pink;
margin:50px auto;
height:800px;
}
nav{
height:50px;
background-color:yellow;
}
nav ul li{
height:50px;
float:left;
margin-left:20px;
background-color:red;
}
a{
line-height:50px;
padding:30px;
margin:30px;
background-color:green;
font-size:14px;
color:rgb(231,79,77);
}
</style>
</head>
<body>
<div id="main">
<header>
<nav>
<ul>
<li><a class="hnav" href="#">首頁</a></li>
<li><a class="hnav" href="#">最新活動</a></li>
<li><a class="hnav" href="#">項目介紹</a></li>
<li><a class="hnav" href="#">愛心社區(qū)</a></li>
<li><a class="hnav" href="#">關于我們</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
效果（不會做點鏈接彈出demo的效果，會的大神求教）：
看效果圖：鏈接元素a的父元素li以及nav元素的高度都是50px段直，且都為白色背景吃溅，但是設置a的css樣式為padding:30px之后，發(fā)現(xiàn)高度超過了白色區(qū)域（即50px）鸯檬，按照行內(nèi)元素的盒子模型理論决侈，應該是padding-top和padding-bottom都是無效的，然而這里卻有效了么喧务？先來看另外一個例子：
example2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example2 行內(nèi)元素 對margin-top margin-bottom無效果 而padding-top padding-bottom有效果但只是表象 對其它元素無影響</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
span{
color:black;
padding:50px;
margin:50px;
border:3px solid black;
}
.pone{
color:blue;
}
.ptwo{
color:tomato;
}
</style>
</head>
<body>
<p class="pone">
test 1<span>test span</span>test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1 test 1
</p>
<p class="ptwo">test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2 test 2</p>
</body>
</html>
效果：
又是個奇怪的現(xiàn)象赖歌，我在截取另一張圖，其它都一樣蹂楣，只是 test 1 部分的數(shù)量大量增加：
是的效果如上圖俏站，我們可以看到span設置的margin確實符合行內(nèi)元素的盒子模型，水平方向外邊距有效痊土，豎直方向外邊距無效肄扎，但是對于padding似乎是水平和垂直方向都有效，但我們仔細看上述example1和example2的兩張圖：example1中，我們設置的padding-top和padding-bottom是相等的犯祠，然而也表現(xiàn)了出來旭等，因此也說明行內(nèi)元素的padding-top、padding-bottom確實是有效果衡载，但在example2中搔耕，可以看到豎直方向的padding屬性并不對其他元素有影響，因此行內(nèi)元素豎直方向內(nèi)邊距確實是無效的痰娱；垂直方向上margin屬性更是一點沒有效果弃榨，只有水平方向外邊距有效。
查w3c的官方文檔并沒有找到這個奇葩現(xiàn)象解釋（可能我英語比較爛梨睁，沒找到）鲸睛，后來在一篇老外的文章里找到了答案：
While padding can be applied to all sides of an inline element, only left and right padding will have an effect on surrounding content. In the example below, 50px of padding has been applied to all sides of theelement. As you can see, it has an affect on the content on each side, but not on content above or below
這段話基本解釋了上述現(xiàn)象，當我們使用內(nèi)邊距時坡贺，只有左右方向有效官辈；當我們設置四個方向的內(nèi)邊距時，對于該行內(nèi)元素遍坟，確實顯示出效果拳亿，但是豎直方向的內(nèi)邊距只有效果，對其他元素無任何影響愿伴。
因此肺魁，行內(nèi)元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是無效公般；不過要注意一點万搔，對于豎直方向的內(nèi)邊距該行內(nèi)元素的內(nèi)容范圍是增大了，不過只是表象官帘，對周圍元素無任何影響瞬雹。
