inline-block 元素间存在空隙的解决办法
将元素的 display 属性设置为 inline-block 时,inline-block元素之间会呈现出几像素的空隙。
html结构
<div class="box">
<a class="item">inline-block</a>
<a class="item">行内块元素</a>
<a class="item"></a>
<a class="item"></a>
</div>
css样式
.box{
width:400px;
height:80px;
background-color: red;
}
.box .item{
display:inline-block;
width:80px;
height:40px;
background-color: blue;
}
如上图,在四个蓝色块之间存在空隙。
要解决这个问题,需要将 inline-block 元素的父级元素的 font-size 属性设置为 0 ( font-size: 0; ),然后,在 inline-block 元素上重新设置 font-size 为需要的值。
css样式
.box{
width:400px;
height:80px;
font-size:0;
background-color: red;
}
.box .item{
overflow:hidden;
display:inline-block;
width:80px;
height:40px;
background-color: blue;
}
css样式
.box {
width: 400px;
height: 80px;
font-size: 0;
background-color: red;
}
.box .item {
overflow: hidden;
display: inline-block;
width: 80px;
height: 40px;
font-size: 14px;
background-color: blue;
}
.box .item:nth-child(even){
background-color: yellow;
}
当 inline-block 元素内有内容的时候,会出现如上图所示的现象,有内容的元素会向下偏移,这时候只需将 inline-block 元素的 overflow 属性设置为 hidden 即可( overflow: hidden; )。
css样式
.box {
width: 400px;
height: 80px;
font-size: 0;
background-color: red;
}
.box .item {
overflow: hidden;
display: inline-block;
width: 80px;
height: 40px;
font-size: 14px;
background-color: blue;
}
.box .item:nth-child(even){
background-color: yellow;
}