缝隙未解决前
缝隙解决后
给父元素设置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>
直接写在一行
<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>
右边的盒子加一个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>
float是忽略空白符的,不过你的CSS布局可能要重新花一下心思,可能会涉及到清除浮动之类设置。