首先,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. 第2章 Python序列

    Python序列类似于C或Basic中的一维.多维数组等,但功能要强大很多,使用也更加灵活.方便,Head First Python一书就戏称列表是“打了激素”的数组. Python中常用的序列结构有 ...

  2. JavaSE 学习笔记之异 常(十)

    异 常: 异常:就是不正常.程序在运行时出现的不正常情况.其实就是程序中出现的问题.这个问题按照面向对象思想进行描述,并封装成了对象.因为问题的产生有产生的原因.有问题的名称.有问题的描述等多个属性信 ...

  3. AndroidTreeView:Android树形节点View

     AndroidTreeView:Android树形节点View AndroidTreeView是github上的一个第三方开源项目,其在github上的项目主页是:https://github. ...

  4. (43). Spring Boot动态数据源(多数据源自动切换)【从零开始学Spring Boot】

    在上一篇我们介绍了多数据源,但是我们会发现在实际中我们很少直接获取数据源对象进行操作,我们常用的是jdbcTemplate或者是jpa进行操作数据库.那么这一节我们将要介绍怎么进行多数据源动态切换.添 ...

  5. 洛谷—— P2733 家的范围 Home on the Range

    https://www.luogu.org/problem/show?pid=2733 题目背景 农民约翰在一片边长是N (2 <= N <= 250)英里的正方形牧场上放牧他的奶牛.(因 ...

  6. codevs——T1214 线段覆盖

    http://codevs.cn/problem/1214/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  7. 洛谷 P1479 宿舍里的故事之五子棋

    P1479 宿舍里的故事之五子棋 题目描述 宿舍里好多好多有趣的事! 7890653今天看到不知何时流行的五子棋,在宿舍里拿个本子,画一些格子,一个棋盘就做好了! 当7890653把目光放到棋上,突发 ...

  8. MVC.NET:提供对字体文件.woff的访问

    在我们的项目中如果使用到了Bootstrap框架的话,通常都必须要支持对其自带的glyphicons-halflings-regular的font文件的访问. 诸如在MVC.NET中,如果一开始什么设 ...

  9. Linux - Virsh

    virsh命令 suspend resume dumpxml   KVM平台以存储池的形式对存储进行统一管理,所谓存储池能够理解为本地文件夹.通过远端磁盘阵列(iSCSI.NFS)分配过来磁盘或文件夹 ...

  10. 最经典的SDK程序结构 HelloWin

    程序运行效果:在创建窗口的时候,播放一个声音.且在窗口的客户区中央画一句文字:Hello, Windows 98!,无论程序怎么移动.最大化,文字始终在程序的中央部位. 程序总共分为六个步骤:定义,注 ...