行内元素存在间距问题

最新推荐文章于 2025-04-11 01:30:00 发布

原创最新推荐文章于 2025-04-11 01:30:00 发布

· 558 阅读

2 ·

版权

文章标签：

#js

js 专栏收录该内容

4 篇文章

订阅专栏

行内元素之间存在间距的问题

行内元素不换行

刚在做项目的时候，发现发现，display:inline-block；的元素（即行内元素）之间存在一些间距。我查看之后发现没有margin,padding这种东西。即使我使用通配符也不能消除内外边距，究其原因是行内元素的回车换行符引起的。看看以下实例：

<input />
<button>提交</button>
<input type="text"><input type="submit">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRu3c7zA-1583804995203)(file:///C:\Users\CCY\AppData\Roaming\Tencent\Users\3511564414\QQ\WinTemp\RichOle\932$0W~[9J$8B%KDTI}[Y`K.png)]

可以看出相邻行内元素间当换行写时有间隔，不换行写时没有间隔。元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。

故解决方法之一是行内元素在编辑器中不换行。但考虑到代码可读性，显然连成一行的写法是不可取的。

使用margin负值

我们还可以使用margin负值，但是margin负值的大小与上下文的字体和文字大小相关。

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

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

不写闭合标签

	<div class="space">
        <a href="##">惆怅</a>
        <a href="##">淡定</a>
        <a href="##">热血</a>
    </div>
    <br>
    <div class="space">
        <a href="##">惆怅
        <a href="##">淡定
        <a href="##">热血</a>
    </div>
    /*为了兼容IE6/IE7的浏览器，最后一个列表的标签的结束（闭合）标签不能丢。*/

![img](file:///C:\Users\CCY\AppData\Roaming\Tencent\Users\3511564414\QQ\WinTemp\RichOle\9] $V0J_KVL$ _FSTPS38OGT9.png)

设置font-size为0；

添加样式

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。但是随之而来的问题就是这个盒子里不能有文字了，其子元素可以设置字体需多嵌套一层。

使用letter-spacing

.space {
    letter-spacing: -5px;
}
.space a {
    letter-spacing: 0;
}

该方法可以搞定基本上所有浏览器。

使用word-spacing

.space {
    word-spacing: -5px;
}
.space a {
    word-spacing: 0;
}

一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。

使用浮动

总结：

行内元素之间存在间距的问题解决方法：

行内元素不换行，但这样页面不够美观。
使用margin负值，这个得结合字体大小调整，不是特别建议使用。
不写闭合标签。
使用font-size:0px;这样也可以使间距消失，但是随之而来的问题就是这个盒子里不能有文字了，其子元素可以设置字体需多嵌套一层。
使用letter-spacing或word-spaing。
最后一个flot，flot:left。不建议使用，使用时注意清除浮动。

注：

最近还在用canvas绘图，想要实现设置画布宽高为屏幕宽高，但是页面出现了滚动条，而这也是行内元素的杰作。

  var w = window.innerWidth,
      h = window.innerHeight;
 var canvas = document.getElementById('canvas');
    canvas.width = w;
    canvas.height = h;

解决方法：

既然是行内元素引起的，那我就将元素设置为块级元素。同时去除默认边距。

		*{
            margin: 0;
            padding: 0;
        }
        #canvas{
            background-color: red;
            display: block;
        }

padding: 0;
}
#canvas{
background-color: red;
display: block;
}