1. 方案一
给父元素设置font-size:0;然后给子元素重新设置font-size style="font-size:0;"
<style>
<!--父元素设置font-size:0;-->
.bg{
font-size: 0;
}
.box1{
height: 100px;
width: 100px;
background-color: pink;
}
.box2{
height: 100px;
width: 100px;
background-color: greenyellow;
}
.box1,.box2{
<!--子元素需要重新设置font-size-->
font-size: 1;
display: inline-block;
}
</style>
<div>
<div class="bg">
<div class="box1"></div>
<div class="box2"></div>
</div>
2.方案二
直接写在一行
<style>
.box1{
height: 100px;
width: 100px;
background-color: pink;
}
.box2{
height: 100px;
width: 100px;
background-color: greenyellow;
}
.box1,.box2{
display: inline-block;
}
</style>
<div class="bg">
<div class="box1"></div><div class="box2"></div>
</div>
3.方案三
右边的盒子加一个margin-left: -5px;
<style>
.box1{
height: 100px;
width: 100px;
background-color: pink;
}
.box2{
height: 100px;
width: 100px;
background-color: greenyellow;
<!--左外边距减去5px-->
margin-left: -5px;
}
.box1,.box2{
display: inline-block;
}
</style>
<div class="bg">
<div class="box1"></div>
<div class="box2"></div>
</div>
4.使用浮动
float是忽略空白符的,不过你的CSS布局可能要重新花一下心思,可能会涉及到清除浮动之类设置。