首页 > 代码库 > 去除inline-block元素间间距的N种方法

去除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=http://www.mamicode.com/"##">惆怅>

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

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

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

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

二、方法之移除空格

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

<div class="space">
    <a href=http://www.mamicode.com/"##">>

或者是:

<div class="space">
    <a href=http://www.mamicode.com/"##">惆怅

或者是借助HTML注释:

<div class="space">
    <a href=http://www.mamicode.com/"##">惆怅