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

 

posted @ 2016-07-28 08:50  昵称你好  阅读(9579)  评论(0编辑  收藏  举报