關於塊寬度..這是怎麼回事這裏

Question

見上面的圖片，這是我的CSS：

.activity { 
    width: 70%; 
    margin: 0 auto; 
} 

.activity .head { 
    margin-top: 3%; 
    text-align: center; 
} 

.activity .body { 
    margin-top: 3%; 
} 

爲什麼都直列塊不能在同一行？

<div class="body" style="background-color:red"> 
    <div style="background-color:green; display:inline-block; width:50%"> 
    </div> 
    <div style="background-color:blue; display:inline-block; width:49.6%"> 
    </div> 
</div> 

當我將第二塊寬度設置爲49.6%時，爲什麼它在下一行開始？

Answer 1

內聯塊之間的空白字符佔用一些空間，因此增加了線框上的總寬度。

如果在HTML代碼中使內聯塊元素彼此相鄰，那麼它的工作方式與您的預期相同。

.body div { 
 
    height: 40px; 
 
    vertical-align: top; 
 
}

<div class="body" style="background-color:red"> 
 
<div style="background-color:green; display:inline-block; width:50%"></div><div style="background-color:blue; display:inline-block; width:50%"></div> 
 
</div>