display为inline-block的元素中间有间隙的原因和解决办法
2024-01-05 15:32:26原因
浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。通常为了美观，会将标签单独占一行，标签与标签之间使用了空格或者是换行符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display为inline-block的元素中间有间隙</title>
</head>
<style>
.red {
display: inline-block;
background-color: red;
}
.green {
display: inline-block;
background-color: green;
}
.yellow {
display: inline-block;
background-color: yellow;
}
</style>
<body>
<div>
<span class="red">1</span>
<span class="green">2</span>
<span class="yellow">3</span>
</div>
</body>
</html>
展示效果：
解决办法
如果兄弟元素比较少的话，可以删除空格或者换行符
设置父元素的font-size为0，子元素重新设置字体大小
div {
font-size: 0;
}
span {
font-size: 12px;
}
非第一个子元素可以设置margin-left负值
父元素的letter-spacing为-6px，子元素的letter-spacing为0
div {
letter-spacing: -6px;
}
div span {
letter-spacing: 0;
}
- 父元素的word-spacing为-6px，子元素的word-spacing为0
div {
word-spacing: -6px;
}
div span {
word-spacing: 0;
}