首先，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. 原型&&原型链一语道破梦中人

    一直对原型和原型链模模糊糊,今天看到一句话,通过这句话再结合我目前对原型和原型链的理解算是让我对原型和原型链有一个更清醒的认识;并且记忆更加深刻; 任何一个对象都有一个隐式原型:__proto__属性 ...

  2. [JS]window.location获取url各项参数详解

    window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...

  3. Delphi / Pascal 语法知识干货

    ********************************************* Pascal.Delph干货 *************************************** ...

  4. Excel表格

    自己一个一个试出来,并写上解释. 还不熟练,待多写代码多练习. #!/usr/bin/python # -*- coding:utf-8 -*- import os import xlwt impor ...

  5. 如何让其他计算机访问我的计算机上mysql数据库?

    先判断是不是在同 一个网络之间,你ping 一下它的ip ,看能不能ping通. 这样就有两种情况, 第一种:能ping通,说明你们在同一个网络中,可以直接访问.你只要在你的登录用户中的帐号加上可外部 ...

  6. 解析 XML 数据

    在几个月前我有做过这样的记录,其目的是避免解析 XML 时手工编写太多的代码,造成重复的体力劳动.后来经过一番资料的查找,我发现其实并没有必要做这样的工具,因为 C# 已经为我们提供了更好的解决方案了 ...

  7. 51nod挑的部分5级题

    最近心情不好所以写代码来获得快落 4级题有点难做?然后就开始挑简单的5级题开始写 然后准备记录一些自己没有做出来 参考讨论区或者博客才做出来的题目 51nod_1189 阶乘分数 这个题参考了讨论区 ...

  8. eclipse 下使用 git

    一.默认仓库文件夹 二.window -->perspective --> customize perspective 三.提交时,要忽略的文件

  9. 垂直相邻margin合并解决方法

    块级元素的垂直相邻外边距会合并,水平边距永远不会重合. 行内元素实际上不占上下外边距,左右外边距也不会合并.浮动元素的外边距也不会合并. 外边距重叠的意义 外边距的重叠只产生在普通流文档的上下外边距之 ...

  10. CSUOJ 1329 一行盒子(数组模拟链表)

    题目:id=1329">http://acm.csu.edu.cn/OnlineJudge/problem.php? id=1329 题意: watermark/2/text/aHR0 ...