無法消除包含div內的2個水平div之間的空間

Question

應該很容易吧？ 只需將外部包含div的填充設置為零，並將外部div內的兩個並排div設置為margin：0即可，但這對2個水平div之間的空間沒有影響。 我需要的是紅色輪廓的左側div觸摸綠色輪廓的右側div。

盡管我努力使用padding和margin，但2個div之間的空間不會消失。

我已經看過很多關於SO的答案，但到目前為止，還沒有人將其分解為這個簡單的示例-我的小提琴在

http://jsfiddle.net/Shomer/tLZrm/7/

這是非常簡單的代碼：

<div style="border: 4px solid blue; white-space:nowrap; margin:0; padding:0; width:80%">

   <div style="display:inline-block; width:45%; overflow:hidden; margin:0; border: 1px solid red"> Flimmy-flammy
    </div>

    <div style="display:inline-block; width:50%; overflow:hidden; margin:0px; border: 1px solid green"> Hambone-Sammy
    </div>

</div>

Answer 1

div之間呈現的空間是折疊的空格（表示為點）：

    </div>.  
.................  
....<div>

而是嘗試像這樣編碼：

    </div><div>

差距將消失。

Answer 2

使用float屬性。

div { float: left; } div { float: left; } ： http : //jsfiddle.net/tLZrm/10/ 。

Answer 3

內聯塊之間源中的空白導致布局中的空白。 通過刪除空格（無論是單個空格還是換行都無關緊要），元素將按預期方式觸摸。

通過注釋掉空格或使空格出現在標簽中，可以以少量的成本保留代碼的格式。

使用注釋：

<div>
   <div>Content</div><!--
   --><div>Content</div>
</div>

在標簽內放置換行符：

<div>
   <div>Content</div
   ><div>Content</div>
</div>

Answer 4

嘗試這個：

<div style="border: 4px solid blue; margin:0; padding:0; width:80%; height: 50px;">

   <div style="float:left; display:inline-block; width:45%; overflow:hidden; border: 1px solid red;"> Flimmy-flammy
    </div>

    <div style="float: left; display:inline-block; width:50%; overflow:hidden; border: 1px solid green;"> Hambone-Sammy
    </div>

</div>  

Answer 5

就像@Juan Lanus在回答中所說的那樣，是空格導致了您的問題。

另一個解決方案是在包含的div上設置font-size: 0px 。

但是您還需要在子div上設置font-size: initial （或設置為非零值），以便仍然可以看到您的文本。