行内元素为何不能设置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值；