zoukankan      html  css  js  c++  java
  • 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属性没有关系。

  • 相关阅读:
    4.22课堂
    4.21课堂
    4.20作业
    4.20课堂
    4.17课堂
    4.16课堂
    4.15作业
    4.15反射与内置方法
    4.10绑定与非绑定
    70、django中间件
  • 原文地址:https://www.cnblogs.com/xiaqilin/p/6929795.html
Copyright © 2011-2022 走看看