清除两个inline-block元素之间的默认间隙
最近在做项目时遇见一个问题就是我给一个盒子设置了display:inline-block后,元素之间会有一点默认间隙,后来上网一查,才知道inline-block是有默认间距的,默认间距为4px。下面就说一下我的解决方法:
问题:
<style>
.box1{
width: 800px;
height: 1000px;
background-color: black;
}
.box1 .innerbox1{
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
}
.box1 .innerbox2{
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div class="box1">
<div class="innerbox1">第一个子盒子</div>
<div class="innerbox2">第二个子盒子</div>
</div>
</body>
以上代码两个盒子之间会有默认间隙
为什么会出现这样的问题?
html的闭合标签其实是一个换行符,会产生一个空白符,所以在元素之间会产生一个间隙。
解决方法
1.将元素标签都写在同一行,也就是元素不换行
<body>
<div class="box1">
<div class="innerbox1">第一个子盒子</div><div class="innerbox2">第二个子盒子</div>
</div>
</body>
这样就可以完美解决,但是这样会造成页面不美观不方便后期查看代码。
所以我一般用二种方法
2.给父元素设置font-size:0px,然后再给子元素单独设置font-size
<style>
.box1{
width: 800px;
height: 1000px;
background-color: black;
font-size: 0px;
}
.box1 .innerbox1{
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
font-size: 14px
}
.box1 .innerbox2{
display: inline-block;
width: 100px;
height: 100px;
background-color: pink;
font-size: 14px
}
</style>
<body>
<div class="box1">
<div class="innerbox1">第一个子盒子</div>
<div class="innerbox2">第二个子盒子</div>
</div>
</body>