首先，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属性没有关系。

span标签对于margin-top,margin-bottom无效，但是margin-left,margin-right却是有效的。的更多相关文章

  1. 定位（left 、right 、top 、 bottom）、padding、margin 值设为百分比值时

    定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...

  2. H5 29-div和span标签

    29-div和span标签 --> 努力到无能为力, 拼搏到感动自己 --> 我是div 我是div 我是span 我是span --> --> 我是段落 我是标题 --> ...

  3. margin的auto的理解 top,left[,bottom,right] position

    auto auto 总是试图充满父元素 margin有四个值: All the margin properties can have the following values: auto - the ...

  4. 绝对定位元素left、right、top、bottom值与其margin和宽高的关系

    绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + le ...

  5. HTML连载29-div和span标签

    一.div标签 1.作用:一般用于配合CSS完成网页的基本布局 2.例子: <style> .head{ width: 980px; height: 100px; background: ...

  6. top:0;bottom:0;left:0;right:0;同时使用的效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. span标签设置margin-top没有效果

    <span>是行内元素,span只有margin-left和margin-right才有效果.要想margin-top生效就要把span转给块级元素才行.在span的css中加入以下属性即 ...

  8. JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件

    效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的 ...

  9. 关于定位中left和right，top和bottom的权重问题

    关于定位中left和right,top和bottom的权重问题 在共同类中设置了定位并且设置了left等定位,如果你引用这个类并加入其他的类中也有left和right等定位,那么你设置的right或是 ...

  10. 设置多行文本框不能拓展大小和span标签边框设置

    resize: none;/*设置多行文本框,不能拓展大小*/ #span { display: block; border: 1px solid RGB(169,169,169); /* span标 ...

随机推荐

  1. Tomcat启动失败--Several ports (8005, 8080, 8009)

    启动Tomcat服务器报错: Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are alre ...

  2. 7-15 QQ帐户的申请与登陆

    7-15 QQ帐户的申请与登陆(25 分) 实现QQ新帐户申请和老帐户登陆的简化版功能.最大挑战是:据说现在的QQ号码已经有10位数了. 输入格式: 输入首先给出一个正整数N(≤10​5​​),随后给 ...

  3. redis学习五，redis集群搭建及添加主从节点

    redis集群 java架构师项目实战,高并发集群分布式,大数据高可用,视频教程 在redis3.0之前,出现了sentinel工具来监控各个Master的状态(可以看上一篇博客).如果Master异 ...

  4. [Cogs727] [网络流24题#2] 太空飞行计划 [网络流，最小割]

    建图:源点—(w[i])—>实验—(∞)—>仪器—(cost[i])—>汇点, 如果该实验造成收益,则仪器到汇点的边在最小割中, 如果该实验造成损失,则源点到实验的边在最小割中, 故 ...

  5. kendo grid create

    这种自定义的create中的函数,这个data的行为是在发送到后端之前执行的 //{ // url: "/admgr/AdUserAuthorityAdd", // dataTyp ...

  6. [转]十五天精通WCF——第十天 学会用SvcConfigEditor来简化配置

    我们在玩wcf项目的时候,都是自己手工编写system.serviceModel下面的配置,虽然在webconfig中做wcf的服务配置的时候,vs提供大多 数的代码提示,但对于不太熟悉服务配置的小鸟 ...

  7. h5 播放器 -3

    autoplay <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. 怎样使用ListView实现一个带有网络请求，解析，分页，缓存的公共的List页面来大大的提高工作效率

    在寻常的开发中常常会有非常多列表页面.每做一个列表页就须要创建这个布局文件那个Adapter适配器文件等等一大堆与之相关的附属的不必要的冗余文件. 假设版本号更新迭代比較频繁,如此以往,就会使项目pr ...

  9. 4、angularJS过滤器

    一.过滤器的作用 过滤器用来格式化须要展示给用户的数据. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器. 比如.如果我们希望将字符串转换成大写能够对字符串中的每一个字符都单独进行转换操 ...

  10. luogu2157 [SDOI2009]学校食堂 局部状压

    题目大意 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴.当然,不同的人口味也不一定相同,但每个人的口味都可以用一个非负整数 ...