span标签对于margin-top,margin-bottom无效，但是margin-left,margin-right却是有效的。

首先，span是行内元素，是没有宽高的。

我们来做个简单的布局

    <div>
    <span>内容内容内容内容内容内容内容内容</span>
    </div>

页面的最原始的效果,就给div加个边框：

为了能够让span的margin-top和margin-bottom生效，可以按照下面的做法：给span加一个display:inline-block或者直接display:block;具体操作，随你自己。

还有一个就是，你想让文字居中，就可以借助line-height，这个时候，就可以不需要display来控制了，你要多高，就改变line-height的值就可以，也不需要margin-top或者margin-bottom，因为你加了line-height本来文字居中了，然后你加个外边距，反倒让文字偏移了预期，这就多此一举了。

需要说明的就是，span的margin-left和margin-right是本来就有效的，跟display属性没有关系。

转载于:https://www.cnblogs.com/xiaqilin/p/6929795.html