行內元素為何不能設置margin-top、margin-bottom；padding-top、padding-bottom值

曾經學過的教程中寫明：行內元素的特點有：

1、與其他元素在同一行

2、寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)不可設置

 

當時對於第二點中的內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)不可設置有一些疑惑，經過驗證后，發現這4個屬性是可以設置的，但是不建議設置。

如代碼所示，行內元素a設置

 margin-top:20px;margin-right:20px; 樣式中簡寫為margin:20px 20px 0 0;

padding-top：5px; padding-right:5px;樣式中簡寫為padding:5px 5px 0 0;

<style>
        *{padding:0;margin:0}
        div.wrap{width:200px;height:200px;border:1px solid red;margin:10px;word-wrap:break-word;}
        .inline-element a{margin:20px 20px 0 0;padding:5px 5px 0 0;height:20px;line-height:20px;background:#ccc;}
</style>


<div class="wrap">
    <span class="inline-element"><a href="">北京</a><a href="">上海</a><a href="">天津</a><a href="">遼寧</a><a href="">吉林</a><a href="">黑龍江</a></span>
</div>

 

顯示如下：圖中的行內元素

<a href="">北京</a>

黃色部分為margin、紫色部分為padding；紅色線條為border；元素背景色為灰色。

可以看出margin-top和padding-top在邊框以外。因為margin的背景色透明，因此margin-top的設置對行內元素的顯示不影響；

而padding-top的背景色為灰色，可以看到下方的a元素的背景色會覆蓋上方的a元素；如果a元素的背景色是透明色的話，那么padding-top值設置對行內元素的顯示也不影響。

因此我們要記住：對於行內元素盡量不要設置margin-top、margin-bottom；padding-top、padding-bottom值；