縫隙未解決前

縫隙解決後

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佈局可能要重新花一下心思，可能會涉及到清除浮動之類設定。