首先，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. RESTful API 学习【第1篇】

    一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ...

  2. lua_note_01_lua介绍

    1. lua 1. lua 1.1. lua介绍 1.2. Lua 特性 1.3. 特点 1.4. Lua 应用场景 1.5. 环境搭建 1.6. VS lua 1.1. lua介绍 Lua 是一种轻 ...

  3. uva 227 Puzzle (UVA - 227)

    感慨 这个题实在是一个大水题(虽然说是世界决赛真题),但是它给出的输入输出数据,标示着老子世界决赛真题虽然题目很水但是数据就能卡死你...一直pe pe直到今天上午AC...无比感慨...就是因为最后 ...

  4. Python 输出带颜色的文字方法

    输出文字带颜色 书写格式,和相关说明如下: #格式: 设置颜色:  \033[显示方式;前景色;背景色m     \033[0m 方法: 字体色 背景色 颜色 -------------------- ...

  5. BZOJ 1232 USACO 2008 Nov. 安慰奶牛Cheer

    [题解] 对于每一条边,我们通过它需要花费的代价是边权的两倍加上这条边两个端点的点权. 我们把每条边的边权设为上述的值,然后跑一边最小生成树,再把答案加上最小的点权就好了. #include<c ...

  6. C#关键字详解第一节

    abstract:抽象类: 他表达对问题或者实际中的事物,对象等所设计出的抽象概念,比如一个灵感.生物等,这些都是抽像, 但是他们往往也有具体的指向,比如生物圈有人类,猴子,老虎等等,老虎和人类是实际 ...

  7. 【codeforces 527D】Clique Problem

    [题目链接]:http://codeforces.com/contest/527/problem/D [题意] 一维线段上有n个点 每个点有坐标和权值两个域分别为xi,wi; 任意一对点(i,j) 如 ...

  8. Configuration must specify a spooling directory

    启动spooling源时报错: 原因:spooling配置文件有误 a1.sources.r1.type = spooldir a1.sources.r1.spooldir = /usr/local/ ...

  9. 浅析gcc、arm-linux-gcc和arm-elf-gcc关系

    浅析gcc.arm-linux-gcc和arm-elf-gcc关系 一.GCC简介 The GNU Compiler Collection,通常简称 GCC,是一套由 GNU 开发的编译器集,为什么是 ...

  10. [poj1062]昂贵的聘礼_最短路_离散化

    昂贵的聘礼 poj-1062 题目大意:原文链接?不是英文题,自己看 注释:$1\le N \le 100$. 想法:开始的想法有些过于简单,因为落下了一个条件:就是等级限制是一条路径上的任意两点而不 ...