版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34874517/article/details/81332535
解决display: inline-block 下 元素之间有间距的问题
在某种情况下 , 不想使用浮动方法 , 又要考虑兼容的情况下 。通常我们会使用 display: inline-block 来使元素处于并排显示, 会遇上这样的情况
* {
padding: 0px;
margin: 0px;
}
body {
padding-top: 100px;
padding-left: 100px;
}
div {
width: 100px;
height: 100px;
display: inline-block;
background-color: #ccc
}<body>
<div></div>
<div></div>
</body>
红色圈住的地方就有空隙, 一般情况下倒是没有什么 , 但如果 外层的容器固定宽度 且 要并排显示的时候 , 就会出现这样的情况
* {
padding: 0px;
margin: 0px;
}
body {
padding-top: 100px;
padding-left: 100px;
}
div {
width: 100px;
height: 100px;
display: inline-block;
background-color: #ccc
}
.divContainer {
width: 200px;
height: 100px;
border: 1px solid blue;
background-color: #fff;
}<body>
<div class="divContainer">
<div></div>
<div></div>
</div>
</body>
原因是因为折行 也被编译器认为是一个字符(相当于一个空格), 解决的办法也有:
给 装载 div 容器的 样式 赋值一个 font-size:0px 就可以解决了
.divContainer {
width: 200px;
height: 100px;
border: 1px solid blue;
background-color: #fff;
font-size: 0px;
}
为了方便区分 我给这两个div 修改了一下颜色, 唯一的缺点就是 需要给这些div 写字体大小 font-size