參考資料：Inline elements and padding 今天寫一個導航欄時遇到了一個問題：行內元素的padding-top，padding-bottom和margin-top,margin-bottom是不是真的是無效的？ 接下來就這個問題將具體分析： 1.行內元素擁有盒子模型麽 答案是是 ...
參考資料：Inline elements and padding
今天寫一個導航欄時遇到了一個問題：行內元素的padding-top，padding-bottom和margin-top,margin-bottom是不是真的是無效的？
接下來就這個問題將具體分析：
1.行內元素擁有盒子模型麽
答案是是的。沒錯，行內元素跟塊級元素一樣，同樣擁有盒子模型。
2.行內元素的padding-top，padding-bottom和margin-top,margin-bottom是否無效
答案同樣是是的。盒子模型的width，height和padding-top，padding-bottom和margin-top,margin-bottom設置都是無效的。但是...
3.實戰探討行內元素的padding-top，padding-bottom和margin-top,margin-bottom
先來看兩個實例：
example1：
源碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>example1</title> <style type="text/css"> *{ margin:0px; padding:0px; text-decoration:none; list-style:none; } #main{ min-width:1280px; background-color:pink; margin:auto; height:800px; } nav{ height:50px; background-color: #ffffff; } nav ul li{ height:50px; float:left; background-color: #ffffff; } 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="#">愛心社區</a></li> <li><a class="hnav" href="#">關於我們</a></li> </ul> </nav> </header> </div> </body> </html>
效果（不會做點鏈接彈出demo的效果，會的大神求教）：
看效果圖：鏈接元素a的父元素li以及nav元素的高度都是50px，且都為白色背景，但是設置a的css樣式為padding:30px之後，發現高度超過了白色區域（即50px），按照行內元素的盒子模型理論，應該是padding-top和padding-bottom都是無效的，然而這裡卻有效了麽？先來看另外一個例子：
example2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>example2</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>
效果：
又是個奇怪的現象，我在截取另一張圖，其他都一樣，只是test 1部分的數量大量增加：
是的效果如上圖，我們可以看到span設置的margin確實符合行內元素的盒子模型，水平方向外邊距有效，豎直方向外邊距無效，但是對於padding似乎是水平和垂直方向都有效，但我們仔細看上述example1和example2的兩張圖：example1中，我們設置的padding-top和padding-bottom是相等的，那麼如果豎直方向的內邊距真的有效，那麼content的字體就應該居中，事實上並不是；example2中，我們無視邊框的存在，可以看到豎直方向的內邊距看不到任何效果，只有水平方向外邊距有效。因此，行內元素豎直方向內邊距確實是無效的
查w3c的官方文檔並沒有找到這個奇葩現象解釋（可能我英語比較爛，沒找到），後來在一篇老外的文章里找到了答案：
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 the element. As you can see, it has an affect on the content on each side, but not on content above or below
這段話基本解釋了上述現象，當我們使用內邊距時，只有左右方向有效；當我們設置四個方向的內邊距時，對於該行內元素，確實顯示出效果，但是豎直方向的內邊距只有效果，對其他元素無任何影響。
因此，行內元素的padding-top，padding-bottom和margin-top,margin-bottom是真的是無效；不過要註意一點，對於豎直方向的內邊距該行內元素的內容範圍是增大了，不過只是表象，對周圍元素無任何影響。
轉載請註明原文地址並標明轉載：http://www.cnblogs.com/mingjiezhang/p/5373667.html
