如何在 CSS 中去除 inline-block 元素之间的空间
主题:HTML / CSS
答案:移除元素之间的空格
值为 inline-block 的 CSS display 属性对于控制尺寸以及 内联元素 的 margin 和 padding 非常有用。
但是，在使用 display: inline-block; 时，HTML 代码中的空白会在屏幕上创建一些视觉空间。 但是您可以使用以下简单技术摆脱它。
解决方案 1:删除元素之间的空间
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>删除元素之间的额外空间</title>
<style>
ul {
padding: 0;
list-style: none;
}
ul li {
display: inline-block;
background: #ffa500;
padding: 5px 20px;
}
</style>
</head>
<body>
<h2>Normal Behavior</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<hr>
<h2>After Removing Spaces</h2>
<ul>
<li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li>
</ul>
</body>
</html>解决方案 2:在父元素上设置零字体大小
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>在父元素上设置零字体大小</title>
<style>
ul {
padding: 0;
list-style: none;
font-size: 0;
}
ul li {
font-size: 16px;
display: inline-block;
background: orange;
padding: 5px 20px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>您也可以利用 inline-block 元素上的 margin: -4px; 等 4 像素的负边距来解决此问题，但上述两种方法更简单。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
