css a 标签上下间距_CSS实用技能:去除inline-block元素间间距的7种方法
现象描述
真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:
两个相邻的radio之间总是多那么一点点的间距,不是margin也不是padding,但是设计妹纸不干了!!!
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:
.space a { display: inline-block; padding: .5em 1em; background-color: #cad5eb;}
惆怅 淡定 热血
这种表现是符合规范的应该有的表现
不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)!
二、方法之移除空格
元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:
惆怅 淡定 热血
或者是:
惆怅淡定热血
或者是借助HTML注释:
惆怅淡定热血
三、使用margin负值
.space a { display: inline-block; margin-right: -3px;}
margin负值的大小与上下文的字体和文字大小相关,其中,间距对应大小值可以参见我之前“基于display:inline-block的列表布局”一文part 6的统计表格:
例如,对于12像素大小的上下文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。
由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。
四、让闭合标签吃胶囊
如下处理:
惆怅 淡定 热血
注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。
在HTML5中,我们直接:
惆怅 淡定 热血
好吧,虽然感觉上有点怪怪的,但是,这是OK的。
您可以狠狠地点击这里:无闭合标签去除inline-block元素间距demo
五、使用font-size:0
类似下面的代码:
.space { font-size: 0;}.space a { font-size: 12px;}
这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:
类似下面的代码:
.space { font-size: 0; -webkit-text-size-adjust:none;}
您可以狠狠地点击这里(去年制作的一个简单demo):font-size:0清除换行符间隙demo
补充:根据小杜在评论中中的说法,目前Chrome浏览器已经取消了最小字体限制。因此,上面的-webkit-text-size-adjust:none;代码估计时日不多了。
六、使用letter-spacing
类似下面的代码:
.space { letter-spacing: -3px;}.space a { letter-spacing: 0;}
根据我去年的测试,该方法可以搞定基本上所有浏览器,包括吃“东鞋”、“西毒(胶囊)”、“南地(沟油)”、“北钙(三鹿)”的IE6/IE7浏览器,不过Opera浏览器下有蛋疼的问题:最小间距1像素,然后,letter-spacing再小就还原了。
七、使用word-spacing
类似下面代码:
.space { word-spacing: -6px;}.space a { word-spacing: 0;}
一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。据我测试,word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。
您可以狠狠地点击这里:word-spacing与元素间距去除demo
与上面demo一样的效果,这里就不截图展示了。如果您使用Chrome浏览器,可能看到的是间距依旧存在。确实是有该问题,原因我是不清楚,不过我知道,可以添加display: table;或display:inline-table;让Chrome浏览器也变得乖巧。
.space { display: inline-table; word-spacing: -6px;}
八、其他成品方法
下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法(注意,其针对的是block水平的元素,因此对IE8-浏览器做了hack处理):
.yui3-g { letter-spacing: -0.31em; /* webkit */ *letter-spacing: normal; /* IE < 8 重置 */ word-spacing: -0.43em; /* IE < 8 && gecko */}.yui3-u { display: inline-block; zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */ letter-spacing: normal; word-spacing: normal; vertical-align: top;}
以下是一个名叫RayM的人提供的方法:
li { display:inline-block; background: orange; padding:10px; word-spacing:0; }ul { width:100%; display:table; /* 调教webkit*/ word-spacing:-1em;}.nav li { *display:inline;}
也就是上面一系列CSS方法的组组合合。
结语
其他去除间距的方法肯定还有,欢迎大家通过评论方式进行补充。上文部分方法可能有测试不周全之处,因此,部分细节上可能会有纰漏,欢迎指正。
最后,推荐几本书
css a 标签上下间距_CSS实用技能:去除inline-block元素间间距的7种方法相关推荐
- flex 固定一列_css实现两列固定与一列自适应的几种方法
本文介绍了css实现两列固定与一列自适应的几种方法,分享给大家,具体如下: 1.flex布局 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的 ...
- css布局:左边固定宽度,右边自适应宽度或右侧固定,左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- 去除inline-block元素间间距,比较靠谱的两种办法
1.使用注释符号 1 <div><span class="1">1</span></div><!-- 2 -->< ...
- android线程间通信的几种方法_Android 技能图谱学习路线
Java基础 Java Object类方法 HashMap原理,Hash冲突,并发集合,线程安全集合及实现原理 HashMap 和 HashTable 区别 HashCode 作用,如何重载hashC ...
- 去除inline-block元素间间距
根本原因:inline-block元素之间之所以有空白间距是因为空格有字体大小原因. 第一种: 把代码之间的换行空白都去掉. 例如: <div>第一个inline-block元素</ ...
- h5学习笔记之css补充之遮盖特、光影、实现球体、设置随机颜色的3种方法
一.遮盖特效 : mask:url() 这个属性是添加一个透明照片作为遮罩,是拥有图片的属性的 如代码: div{width:500px;height:500px;background:url(&qu ...
- CSS清除浮动的五种方法(超详细)
1.为什么要清除浮动? 浮动的原理是让图片脱离文档流,直接浮在桌面上.我们一般布局的时候都是只设置宽度不设置高度,让内容来自动填充高度.但使用浮动后会让原本填充的高度消失,父元素高度为0,后续添加内容 ...
- css实现三角形的6种方法
在一些面试经验中,经常能看到有关css的题目都会有一道如何使用css绘制三角形,而常见的回答通常也只有使用border进行绘制一种方法. 而css发展到今天,其实有很多有意思的仅仅使用css就能绘制出 ...
- css中div居中显示的四种方法
css中设置div元素居中显示的四种方法 一.先确定div的基本样式 二.具体实现方法 第一种:利用子绝父相和margin: auto实现 第二种:利用子绝父相和过渡动画tranform实现 第三种: ...
最新文章
- hdu 4417(线段树OR树状数组)
- 2.1Python基础语法(一)之注释与数据类型:
- C++ Primer 有感(类)
- 怎么把视频里的音乐提取出来
- 关于“因为数据库正在使用,所以无法获得对数据库的独占访问权”的最终解决方案...
- android auto answer,Incoming call auto answer in android 4.0.3
- 乐高创意机器人moc_乐高MOC佳作欣赏丨机械之美机器人乐高作品集1
- Java中的简单REST客户端
- MFC1、动态创建CButton
- (三)标记图像以进行AI模型训练
- SQL日期格式化处理
- ASP.NET MVC 2 正式发布
- 必读论文|20篇聊天机器人领域必读论文速递
- HikariCP连接池
- 大数据产品推荐:金蜂巢大数据集成与脱敏系统
- 扩展卡尔曼滤波python_扩展卡尔曼滤波EKF与多传感器融合
- 路由器和交换机的作用及区别,不再为路由器的选择而烦恼
- 知道maven地址,如何在maven官网下载jar包
- vivo社招面试流程,坐标南京
- Excel怎么快速删除空白表
热门文章
- CSS3圆圈动画放大缩小循环动画效果
- c++ 常见问题之string
- Jquery学习笔记:利用find和children方法获取后代元素
- ie6/IE8/IE9/谷歌以及火狐等浏览器下li 高度一致解决办法
- 删除不同粒度的事实表记录中重复的度量值数据的SQL语句
- 120.数据缓存cache的基本概念
- 119.CSMA/CD
- 马斯克发推警告:高级AI将操纵社交媒体,或引发第三次世界大战
- 人工智能和中国学霸比赛做卷子居然输了?
- 计算机视觉开源库OpenCV添加文字cv2.putText()参数详解