当使用inline-block进行布局时,两个块元素之间会存在一个几px宽的缝隙。这是由于换行造成的空白符所引起的。为了代码的美观,两个元素之间大多都是进行了换行的。
<body>
<div class="divTest">
<div class="divTest_one"></div>
<div class="divTest_two"></div>
<div class="divTest_three"></div>
</div>
</body>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.divTest {
/* border: 1px solid black; */
width: 500px;
height: 500px;
}
.divTest_one {
height: 100px;
width: 100px;
background: red;
display: inline-block;
}
.divTest_two {
height: 100px;
width: 100px;
background: blue;
display: inline-block;
}
.divTest_three {
height: 100px;
width: 100px;
background: green;
}
</style>
要处理这里的间隙呢,有多种方法,1.最简单的则是元素之间不换行,两个元素在一行书写,可以解决左右之间的间隙但是影响了代码的美观性,并且上下之间的间隙依旧存在。
<div class="divTest">
<div class="divTest_one"></div><div class="divTest_two"></div><div class="divTest_three"></div>
</div>
2.其次是设置父元素的字体大小为0,上下左右的间隙都给解决了。
.divTest {
/* border: 1px solid black; */
width: 100%;
height: 500px;
overflow: hidden;
font-size: 0;
}
3.还有很多魔改解决方法,比如可以使用vertical-align:middle解决。这样可以解决上下的问题,但是左右的样式就更加的不美观。使用margin负值,绝对定位(没有什么是绝对定位解决不了的如果有那就算了)等等。
.divTest_one {
height: 100px;
width: 100px;
background: red;
display: inline-block;
vertical-align: middle;
}