去除inline-block元素间的间距
程序员文章站
2022-09-30 11:14:17
一、现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或者空格隔开的情况下会有间距,这是因为浏览器在解析时,会将换行等读取成一个空格导致。 二、移出空格的方法 ① 我们可以去掉元素之间的换行和空格,这样间距自然就没有了,但是这样会降低代码的可读性,不可取。 ② 使用margin ......
一、现象描述
真正意义上的inline-block水平呈现的元素间,换行显示或者空格隔开的情况下会有间距,这是因为浏览器在解析时,会将换行等读取成一个空格导致。
二、移出空格的方法
① 我们可以去掉元素之间的换行和空格,这样间距自然就没有了,但是这样会降低代码的可读性,不可取。
<div> <a href=""> 链接1</a><a href=""> 链接2</a><a href=""> 链接3</a><a href=""> 链接4</a> </div> <div> <a href="">链接1</a ><a href="">链接2</a ><a href="">链接3</a ><a href="">链接4</a> </div> <div> <a href="">链接1</a><!-- --><a href="">链接2</a><!-- --><a href="">链接3</a><!-- --><a href="">链接4</a> </div>
② 使用margin负值,但是,由于外部的不确定因素,以及最后一个元素多出来的负margin值的问题,这个方法也不太可取。
<style> a { background: pink; display: inline-block; padding: .5em 1em; margin: -3px; } </style> <body> <div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a> </div> </body>
③ 给父级设置font-size:0,然后再在子元素中设置我们的字体大小,这样也可以去掉元素间的间距。
<style> div{ font-size: 0; } a{ font-size: 16px; background: pink; } </style> <div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a> </div>
④ 删掉闭合标签。
<div> <a href="">链接1 <a href="">链接2 <a href="">链接3 <a href="">链接4 </div>
⑤ 使用letter-spacing。
<style> div{ letter-spacing: -6px; } a{ letter-spacing: 0; background: pink; } </style> <div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a> </div>
⑥ 使用word-spacing。
<style> div{ word-spacing: -6px; } a{ word-spacing: 0; background: pink; } </style> <div> <a href="">链接1</a> <a href="">链接2</a> <a href="">链接3</a> <a href="">链接4</a> </div>
推荐阅读
-
Python合并字典键值并去除重复元素的实例
-
IE6/7下IE下块元素如何实现display:inline-block 的效果
-
php去除数组内空格元素的有关问题
-
Python去除列表中重复元素的方法
-
C# List去重的三种方法(转) 博客分类: C# .NET list去重list去除重复元素list去除某些属性相同的元素
-
实现自我价值 php 按指定元素值去除数组元素的实现方法
-
PHP去除数组中的空值元素(array_filter)_PHP教程
-
inline-block元素设置overflow:hidden 导致相邻行内元素向下偏移的之坑
-
正常文档流block、inline、inline-block元素与浮动框之间的位置关系
-
java去除List中的重复元素