span标签对于margin-top,margin-bottom无效,但是margin-left,margin-right却是有效的。
首先,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却是有效的。的更多相关文章
- 定位(left 、right 、top 、 bottom)、padding、margin 值设为百分比值时
定位(left .right .top . bottom): top 为例 right 为例 padding.margin : 当padding.margin 值设为百分比值时,其百分比会相对于父元素 ...
- H5 29-div和span标签
29-div和span标签 --> 努力到无能为力, 拼搏到感动自己 --> 我是div 我是div 我是span 我是span --> --> 我是段落 我是标题 --> ...
- margin的auto的理解 top,left[,bottom,right] position
auto auto 总是试图充满父元素 margin有四个值: All the margin properties can have the following values: auto - the ...
- 绝对定位元素left、right、top、bottom值与其margin和宽高的关系
绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + le ...
- HTML连载29-div和span标签
一.div标签 1.作用:一般用于配合CSS完成网页的基本布局 2.例子: <style> .head{ width: 980px; height: 100px; background: ...
- top:0;bottom:0;left:0;right:0;同时使用的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- span标签设置margin-top没有效果
<span>是行内元素,span只有margin-left和margin-right才有效果.要想margin-top生效就要把span转给块级元素才行.在span的css中加入以下属性即 ...
- JS实现60s倒计时(亲测有效),及span标签如何使用和禁用onclick事件
效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的 ...
- 关于定位中left和right,top和bottom的权重问题
关于定位中left和right,top和bottom的权重问题 在共同类中设置了定位并且设置了left等定位,如果你引用这个类并加入其他的类中也有left和right等定位,那么你设置的right或是 ...
- 设置多行文本框不能拓展大小和span标签边框设置
resize: none;/*设置多行文本框,不能拓展大小*/ #span { display: block; border: 1px solid RGB(169,169,169); /* span标 ...
随机推荐
- 第2章 Python序列
Python序列类似于C或Basic中的一维.多维数组等,但功能要强大很多,使用也更加灵活.方便,Head First Python一书就戏称列表是“打了激素”的数组. Python中常用的序列结构有 ...
- JavaSE 学习笔记之异 常(十)
异 常: 异常:就是不正常.程序在运行时出现的不正常情况.其实就是程序中出现的问题.这个问题按照面向对象思想进行描述,并封装成了对象.因为问题的产生有产生的原因.有问题的名称.有问题的描述等多个属性信 ...
- AndroidTreeView:Android树形节点View
AndroidTreeView:Android树形节点View AndroidTreeView是github上的一个第三方开源项目,其在github上的项目主页是:https://github. ...
- (43). Spring Boot动态数据源(多数据源自动切换)【从零开始学Spring Boot】
在上一篇我们介绍了多数据源,但是我们会发现在实际中我们很少直接获取数据源对象进行操作,我们常用的是jdbcTemplate或者是jpa进行操作数据库.那么这一节我们将要介绍怎么进行多数据源动态切换.添 ...
- 洛谷—— P2733 家的范围 Home on the Range
https://www.luogu.org/problem/show?pid=2733 题目背景 农民约翰在一片边长是N (2 <= N <= 250)英里的正方形牧场上放牧他的奶牛.(因 ...
- codevs——T1214 线段覆盖
http://codevs.cn/problem/1214/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Descr ...
- 洛谷 P1479 宿舍里的故事之五子棋
P1479 宿舍里的故事之五子棋 题目描述 宿舍里好多好多有趣的事! 7890653今天看到不知何时流行的五子棋,在宿舍里拿个本子,画一些格子,一个棋盘就做好了! 当7890653把目光放到棋上,突发 ...
- MVC.NET:提供对字体文件.woff的访问
在我们的项目中如果使用到了Bootstrap框架的话,通常都必须要支持对其自带的glyphicons-halflings-regular的font文件的访问. 诸如在MVC.NET中,如果一开始什么设 ...
- Linux - Virsh
virsh命令 suspend resume dumpxml KVM平台以存储池的形式对存储进行统一管理,所谓存储池能够理解为本地文件夹.通过远端磁盘阵列(iSCSI.NFS)分配过来磁盘或文件夹 ...
- 最经典的SDK程序结构 HelloWin
程序运行效果:在创建窗口的时候,播放一个声音.且在窗口的客户区中央画一句文字:Hello, Windows 98!,无论程序怎么移动.最大化,文字始终在程序的中央部位. 程序总共分为六个步骤:定义,注 ...