span只有margin-left生效

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

margin不生效问题

问题机型魅族M353 Android 5.0.1 问题描述设置了margin-top: 15px; 但是在该机型上不生效解决方案使用padding 替代 margin

table中的th td margin不生效

margin-top,margin-left,margin-right,margin-bottom 是body中的属性th,td 是表格的元素与之对应的是padding-top,padding-left,padding-right,padding-bottom,以及 vspace,hspace,cellspacing,cellPadding=0等元素

行内元素(inline标签)设置了行高为什么不生效，还是表现为父盒子的行高？行内元素行高问题终极解释

最近在看张鑫旭大佬的<css世界>,读到5.2.4 内联元素 line-height 的“大值特性” ,产生了疑惑, 在开发中确实也遇到了同样的问题,深入探究后得出结果,先说结论吧,论证内容有点长,结论: 行内元素自身并没有行高这个属性,虽然设置可以设置行高,但是最终作用的地方并不是自身,而是其自身所在的行框盒子上!如果你不知道什么是行框盒子,建议你好好读读张大佬的<css世界>,这里我简单的画一画如上如所示,我的结论是: 内联盒子没有行高这一属性,给它设置inline-hei

css span宽度和css span高度成功设置经验篇

我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px,css高度为100px,为了观察高度和宽度样式,我们再设置个css边框属性样式. 1.这样应用案例CSS代码为: .divcss5{ width:150px;height:100px; border:1px solid #000; } 2.Body内Html代码为: divcss5 span上<s

深入理解CSS中的margin

1.css margin可以改变容器的尺寸元素尺寸可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo

margin在块元素、内联元素中的区别 padding

(1)margin在块元素.内联元素中的区别 HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline.顾名思义,block元素就是以”块”表现的元素(block-like elements),inline元素即是以”行”表现的元素(character level elements and text strings).二者表现的主要差别在于,在页面文档中block元素另起一行开始,并独占一行.inline元素则同其他inline元素共处一行. block元

关于苹果iPhone手机对页面margin属性无效的解决方法一（如有错误，请留言批评）

这个问题,是在给商城网站底部footer设置margin属性的时候发现的,先把出现问题的截图发出来看一下安卓手机,打开正常 iphone6 p 打开出现的问题(无视margin-bottom:60px) 当然,在google浏览器移动端测试iphone6p,打开的也是没问题的(这说明什么问题呢?) 思索找寻了好久,也有反映margin不起作用的,改成padding就可以,但是改成padding在我这里是不可取的,因为footer如果给加了padding-bottom:60px属性,那

vue中修改第三方组件的样式不生效

问题在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如 <div class="test"> <el-button>按钮</el-button> </div> <style lang="less" scoped> .test{ .el-button span{ background:red; } } </style> 以上对.el-button span的样式不生效问题

[19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的.而CSS可以分别为网页的各个层次设置样式. 书写的位置: 1.内联样式:可以将css样式表书写到元素(标签)的style属性中,只对当前标签中的内容起作用,不方便复用.属于结构与表现耦合,不推荐使用. 2.内部样式:可以将css样式编写的head中style标签中,然后通过css选择器

CSS十问——好奇心+刨根问底=CSSer

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客

pinpoint 安装部署

.markdown-preview:not([data-use-github-style]) { padding: 2em; font-size: 1.2em; color: rgb(171, 178, 191); overflow: auto; background-color: rgb(40, 44, 52) } .markdown-preview:not([data-use-github-style])>:first-child { margin-top: 0px } .markdown-

面试题<初级>

INTERVIEW .markdown-body ul pre code { background:red; font-size:40px; } @code-char:"```" code:before,code:after{ concent:@code-char; background:red; } JavaScript的typeof返回的数据类型 object number function boolean underfind string typeof isNaN => f

[PHP]Yii2框架的坑

[PHP]Yii2框架的坑.md-/Users/zjh/Documents/我的文章/[PHP]Yii2框架的坑 html{font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%}body{margin: 0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{displ

关于IE6/7的 inline-block

今天在写代码的时候使用了inline-block,但是很意外的在IE6/7下此属性不给力~~ 但是由于我既需要他是个内联数据,又要设置它的宽度设置block,所以只能使用inline-block. 所以解决方案有两种: (1)先让其成为内联数据,即先是<span>元素,再设置inline即可生效,此时会触发IE的layout产生相似效果. <span style="display:inline-block"></span> <!--不能用div

divcss5布局

一.ie9不支持line-height字体垂直居中兼容问题原因:CSS中使用了中文字体,而中文字体使用汉字.如:font-family:"微软雅黑" 1.将中文字体汉字转换为Unicode编码 “黑体”对应Unicode编码为“\9ED1\4F53” “宋体”对应Unicode编码为“\5B8B\4F53” “仿宋”对应Unicode编码为“\4EFF\5B8B” “微软雅黑”对应Unicode编码为“\5FAE\8F6F\9

css div要点汇总

1.子元素选择两种 h1 strong{color:red}意思是所有后代只要是strong就变成红色 h1>strong{color:red}效果同上但只对第一代后代元素有效相邻兄弟元素 h1 +strong{color:red} 2. 3.使用background_position属性来提取子png图片 4.越来越觉得css和div的精髓在于层叠. 5.把元素<a>中放置一个图片,于是就做成了一个图片按钮. 6.div居中 margin-left:50%; margin-top:5

div+css（ul li）实现图片上文字下列表布局

css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; width:536px; overflow:hidden}使用margin:0 auto,让ul结构布局居中:使用overflow:hidden,因为ul的子级使用float属性会产生浮动,所以使用清除子级使用float对父级产生不能撑开问题:使用宽度width:536px;固定宽度让子级li准确一排只排

CSS十问——好奇心+刨根问底=CSSer （转）

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客

web即时通讯2--基于Spring websocket达到web聊天室

如本文所用,Spring4和websocket要构建web聊天室,根据框架SpringMVC+Spring+Hibernate的Maven项目,后台使用spring websocket进行消息转发和聊天消息缓存.client使用socket.js和stomp.js来进行消息订阅和消息发送.具体实现见以下代码. 首先在pom.xml中加入对spring websocket的相关依赖包. 一.加入websocket依赖 <span style="font-size:14px;"

CSS十问

CSS十问——好奇心+刨根问底=CSSer 最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心第一问:当margin的值为百分比形式时,为什么浏览

span只有margin-left生效

热门专题