inline-block 之间的间距问题解决

最新推荐文章于 2024-04-03 16:26:02 发布

转载最新推荐文章于 2024-04-03 16:26:02 发布 · 979 阅读

CSS 专栏收录该内容

94 篇文章

订阅专栏

本文介绍了解决inline-block元素间因空白字符导致的间距问题的方法，包括使用float替代、设置上层容器font-size为0及移除空白等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两个 inline-block 标签之间如果有空白，则会有显示上的间距

解决办法：

1.使用float 代替 inline-block

2.在inline-block 的上层容器添加 font-size:0px

3.删除两个标签之间的空白

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="gbk">

<style type="text/css">
#content {
font-size: 0px;
width: 1190px;
border: 1px solid gray;
height: 200px;
margin: 0px auto;
}

.first {
height: 100px;
background-color: blue;
display: inline-block;
width: 190px;

}

.second {
height: 100px;
background-color: red;
display: inline-block;
width: 790px;
margin-left: 10px;

}

.third {
height: 100px;
background-color: green;
display: inline-block;
width: 200px;

}

</style>

</head>
<body>
<div id="content">
<div class="first">第一个</div>
<div class="second">第二个</div>
<div class="third">第三个</div>
</div>
</body>

</html>