去除inline-block元素间间距的N种方法

一、现象描述

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:

<input /> <input type="submit" />

间距就来了~~
表单控件之间的间距例子

我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:

.space a {display: inline-block;padding: .5em 1em;background-color: #cad5eb;
}
<div class="space"><a href="##">惆怅</a><a href="##">淡定</a><a href="##">热血</a>
</div>

inline-block水平元素间的间距示意 张鑫旭-鑫空间-鑫生活

您可以狠狠地点击这里:inline-block元素间间距demo

这种表现是符合规范的应该有的表现(如果有人认为是bug就太()ay ()oy 了)。

不过,这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?以下展示N种方法(欢迎补充)!

二、方法之移除空格

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:

<div class="space"><a href="##">惆怅</a><a href="##">淡定</a><a href="##">热血</a>
</div>

或者是:

<div class="space"><a href="##">惆怅</a><a href="##">淡定</a><a href="##">热血</a>
</div>

或者是借助HTML注释:

<div class="space"><a href="##">惆怅</a><!----><a href="##">淡定</a><!----><a href="##">热血</a>
</div>

等。

三、使用margin负值

.space a {display: inline-block;margin-right: -3px;
}

margin负值的大小与上下文的字体和文字大小相关,其中,间距对应大小值可以参见我之前“基于display:inline-block的列表布局”一文part 6的统计表格:
inline-block元素间间隔大小与字体和文字大小之前的关系表截图

例如,对于12像素大小的上下文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。

由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。

四、让闭合标签吃胶囊

如下处理:

<div class="space"><a href="##">惆怅<a href="##">淡定<a href="##">热血</a>
</div>

注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。

在HTML5中,我们直接:

<div class="space"><a href="##">惆怅<a href="##">淡定<a href="##">热血
</div>

好吧,虽然感觉上有点怪怪的,但是,这是OK的。

您可以狠狠地点击这里:无闭合标签去除inline-block元素间距demo

无闭合标签与inline-block水平元素间距的去除 张鑫旭-鑫空间-鑫生活

五、使用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-spacingword-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方法的组组合合。

转载于:https://www.cnblogs.com/hellman/p/5855807.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker深入浅出2

Docker系统架构 Docker使用客户端-服务端&#xff08;c/s&#xff09;架构模式&#xff0c;使用远程api来管理和创建Docker容器。 docker容器通过Docker镜像来创建。 容器与镜像的关系类似于面向对象编程中的对象与类的关系 Docker面向对象容器对象镜像类加速器配置&#xff1a…

mysql安装包下载密码_MySQL解压包的安装与下载的图文教程

这篇文章主要为大家详细介绍了mysql解压包的安装基础教程&#xff0c;具有一定的参考价值&#xff0c;感兴趣的小伙伴们可以参考一下由于换了新电脑&#xff0c;所以的环境都要到新电脑去配置。突然发现mysql的配置忘了&#xff0c;然后百度又重新来一遍。特地写一篇文章记录一…

php 扒取网页数据

扒取方法 public function index(){$url http://www.dytt8.net/;// $url Public/txt/movies.txt;$content file_get_contents($url);$content iconv("gb2312", "utf-8//IGNORE",$content);$reg "|<div class\"co_content2\">(.*…

多维DP UVA 11552 Fewest Flop

题目传送门 1 /*2 题意&#xff1a;将子符串分成k组&#xff0c;每组的字符顺序任意&#xff0c;问改变后的字符串最少有多少块3 三维DP&#xff1a;可以知道&#xff0c;每一组的最少块是确定的&#xff0c;问题就在于组与组之间可能会合并块&#xff0c;总块数会-1。…

多表联合查询

关联数据库字典表的多表联合查询 inner join…on 自动连接 需要用到表的所有信息时&#xff0c;可以用以下两种方法 1) left join…on… 左连接 &#xff08;以左为准&#xff0c;右边没有NULL代替&#xff09; 2) right join…on… 右连接&#xff08;以右为准&#xff…

python elasticsearch update_使用python的elasticsearch部分更新

我有以下格式的elasticsearch文档。我需要部分更新“x”字段并在其中添加python dict。{"_index": "gdata34","_type": "gdat","_id": "328091-72341-118","_version": 1,"_score": 1,"…

32位与64位注册表

如果32位系统OFP的注册表路径是 HKEY_LOCAL_MACHINE\SOFTWARE\Bohemia Interactive\ 那么在64系统里就应该是 HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Bohemia Interactive\ 多了一级Wow6432Node转载于:https://www.cnblogs.com/zhang-pengcheng/p/4712135.html

http 请求头和响应头

客户端发送请求过程带着的数据&#xff1a; 1.请求地址 2.请求方式 3.请求头 request headers 4.请求参数 https://www.juhe.cn/ 130.... 1a2b....pei 服务端响应给客户端的信息&#xff1a; 1.响应内容 2.响应报文/响应头部 response headers a 响应头 b 响应体 3.http状…

[算法]-排序算法之希尔排序

希尔排序算法思想 希尔排序的实质就是分组插入排序&#xff0c;该方法又称缩小增量排序.基本思想是&#xff1a;先将整个待排元素序列分割成若干个子序列&#xff08;由相隔某个“增量”的元素组成的&#xff09;分别进行直接插入排序&#xff0c;然后依次缩减增量再进行排序&a…

python tkinter button颜色变不了_tkinter多按钮颜色变化

我使用tkinter创建一个8x8按钮矩阵&#xff0c;当按下单个按钮时&#xff0c;它会添加到最终列表中(例如finalList((0,0)&#xff0c;(5,7)&#xff0c;(6,6)&#xff0c;…)&#xff0c;允许我快速创建8x8(x&#xff0c;y)坐标图像。我已经创建了一个带有按钮的窗口&#xff0…

应用spss可靠性分析软件

问卷调查的可靠性分析 一、概念&#xff1a; 信度是指依据測验工具所得到的结果的一致性或稳定性&#xff0c;反映被測特征真实程度的指标。一般而言&#xff0c;两次或两个測验的结果愈是一致。则误差愈小&#xff0c;所得的信度愈高&#xff0c;它具有下面特性&#xff1a;1、…

springmvc中的单例问题

1&#xff0c;springmvc实际上是基于一个叫做DispatcherServlet的servlet的。servlet按照以往的学习经验&#xff0c;他是单事例多线程的。 Servlet生命周期 1.装载Servlet。这项操作一般是动态执行的。然而&#xff0c;Server通常会提供一个管理的选项&#xff0c;用于在Serve…

设计模式 -- 亨元模式(FlyWeight Pattern)

用来尽可能减少内存使用量&#xff0c;适用于存在大量重复对象的场景&#xff0c;达到对象共享&#xff0c;避免创建过多对象的效果&#xff0c;提升性能&#xff0c;避免内存溢出。 定义&#xff1a; 使用共享对象有效支持大量细粒度对象。 适用场景&#xff1a; 系统中存在大…

python3.6使用mysql_Python之——Python3.6连接MySQL

只安装了Python是不能连接数据库的&#xff0c;还要安装Python连接MySQL的相关类库&#xff0c;Python2.7连接MySQL的类库很多&#xff0c;MySQL官方最新支持的Python为Python3.4.&#xff0c;如下图所示&#xff1a;那么&#xff0c;在Python3.6上如何实现连接MySQL的功能呢&a…

android解析json

android2.3提供的json解析类 android的json解析部分都在包org.json下&#xff0c;主要有以下几个类&#xff1a; JSONObject&#xff1a;可以看作是一个json对象 JSONStringer&#xff1a;json文本构建类 JSONArray&#xff1a;可以看作是json的数组 JSONTokener&#xff1a;js…

MVVM模式于MVP模式

MVC、MVP、MVVM这些模式是为了解决开发过程中的实际问题而提出来的&#xff0c;目前作为主流的几种架构模式而被广泛使用。 一.MVP模式(Model-View-Presenter):传统的开发是MVP模式(例如jquery) MVP是把MVC中的Controller换成了Presenter&#xff08;呈现&#xff09;&#xff…

HUNAN 11560 Yangyang loves AC(二分+贪心)

http://acm.hunnu.edu.cn/online/?actionproblem&typeshow&id11560&courseid0 题意&#xff1a;总共有n天,每天yangyang都需要一个快乐值,有m个队友,每个队友都会给阳阳一个快乐值(为2的幂),并且只能给一次,如果某一天队友给的快乐值达到yangyang需要的快乐值那么…

BrowserSync开发利器

2019独角兽企业重金招聘Python工程师标准>>> 大大节省开发时间。安装使用简单。使用步骤&#xff1a; 1、nodejs环境 安装 2、在项目中使用npm安装到本项目 3、对要监听的文件执行响应命令 官网更详细&#xff1a;http://www.browsersync.cn/#install 原理&#xf…

python字符串解析_Python-字符串解析-正则-re

正则表达式特殊字符序列&#xff0c;匹配检索和替换文本普通字符 特殊字符 数量&#xff0c;普通字符用来定边界更改字符思路字符串函数 > 正则 > for循环元字符  匹配一个字符# 元字符大写&#xff0c;一般都是取小写的反1. 0~9 整数          \d    …

algorithm -- 选择排序

选择排序是《导论》第一章课后习题&#xff0c;仿照插入排序&#xff0c;再次运用循环不变式来证明下算法的正确性&#xff0c;C 源码&#xff1a; // 交换函数 void swap( int& a, int& b ) {a a^b;b a^b;a a^b; } void selectSort( int *arr, int count ) {if( a…