inline 或 inline-block 元素间的间隙

39次阅读

共计 1186 个字符,预计需要花费 3 分钟才能阅读完成。

当您将元素显示值设置为内联或内联块时,您通常会在元素之间看到默认的空格。如果您不想要设计中的空格,可以通过多种方法将其删除。
示例代码:
<ul>
<li id = “first”>inline</li>
<li id = “last”>inline-block</li>
</ul>
body {
margin:0;
}
ul {
/*font-size: 40px;*/
list-style:none;
margin: 0;
padding:0;
}
ul li {
display: inline-block;
border: 1px solid #ccc; // 设置边框方便查询
}

解决方案
方法一:通过利用负边距,达到删除空隙

更改上述代码:
ul li + li {
margin-left: -5px;
}
这应该常用一种方式;但是这种方式会受祖先容器字体大小影响,如果字体越大其间隙越大,也就不是上述提供 -5px,就能达到删除空隙了;
可以通过 JS 辅助验证,空隙是否跟字体大小有关:
// 字体大小设置为 16px 情况下:
var first = document.querySelector(‘#first’);
var last = document.querySelector(‘#last’);

var c1 = first.getBoundingClientRect();
var c2 = last.getBoundingClientRect();

var gapWidth = c2.left – c1.width;
// gapWidth => 4.732177734375
// 所以我们前面设置 -5px 原因,因为 CSS 不支持小数点,所以才向上取整;

// 字体大小设置为 32px 情况下:
var first = document.querySelector(‘#first’);
var last = document.querySelector(‘#last’);

var c1 = first.getBoundingClientRect();
var c2 = last.getBoundingClientRect();

var gapWidth = c2.left – c1.width;
// gapWidth => 9.46435546875
// 那么我们前面设置 -5px,就会失效了
了解 getBoundingClientRect 使用,大家可以点击这里查看:
方法二:删除元素之间前后间隙

<ul>
<li class = “first”>inline</li><li class = “last”>inline-block</li>
</ul>

方法三:把父元素 font-size:0,其子元素再重新指定字体大小

ul {
list-style:none;
margin: 0;
padding:0;
font-size:0;
}
ul li {
display: inline-block;
border: 1px solid #ccc; // 设置边框方便查询
font-size: 16px;
}

正文完
 0