首先，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. 1.git上手篇总结

    阅读 Git 原理详解及实用指南 记录 上手 1: Git 的最基本的工作模型 从 GitHub 把中央仓库 clone 到本地(使用命令: git clone) 把写完的代码提交(先用 git ad ...

  2. 17.使用原生cross-fiels技术解决搜索弊端

    主要知识点: 原生cross-fiels的用法 原生cross-fiels解决三个弊端     一.原生cross-fiels的用法     GET /forum/article/_search { ...

  3. Centos下安装mysql（二进制版）

    1.下载安装包,选择相应的平台.版本,比如,选择64位Linux平台下的MySQL二进制包“Linux-Generic (glibc 2.5)(x86,64-bit),Compressed” 如:#w ...

  4. 一个电商项目的Web服务化改造2：现有项目的5个问题

         最近一直在做一个电商项目,需要把原有单系统架构的项目,改造成基于服务的架构,SOA.      有点挑战,做完了,会有很大进步, 1.现有项目的问题   1.1代码风格不统一     不同的 ...

  5. XOR Queries

    XOR Queries 时间限制: 1000ms   内存限制: 256M 描述 给出一个长度为n的数组C,回答m个形式为(L,R,A,B)的询问,含义为存在多少个不同的数组下标k∈[L,R]满足C[ ...

  6. 火星人 2004年NOIP全国联赛普及组

    题目描述 Description 人类终于登上了火星的土地并且见到了神秘的火星人.人类和火星人都无法理解对方的语言,但是我们的科学家发明了一种用数字交流的方法.这种交流方法是这样的,首先,火星人把一个 ...

  7. nyoj_37_回文字符串_201403121649

    回文字符串 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如"aba".当 ...

  8. js移除style属性

    这个属性是通过   div.style.color="red"   这种类似添加的,想要添加重置函数,使用div.removeAttribute("style" ...

  9. 络谷 P1363 幻想迷宫

    P1363 幻想迷宫 题目描述 背景 Background (喵星人LHX和WD同心协力击退了汪星人的入侵,不幸的是,汪星人撤退之前给它们制造了一片幻象迷宫.) WD:呜呜,肿么办啊…… LHX:mo ...

  10. java wait 与 notify sleep

    来自:http://blog.csdn.net/zyplus/article/details/6672775 有适当的代码修改. 在JAVA中,是没有类似于PV操作.进程互斥等相关的方法的.JAVA的 ...