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

應該很簡單吧？只需將包含div的外部填充設置爲零，並將外部div內的兩個並排div設置爲margin：0，但對2個水平div之間的空間沒有影響。我需要的是紅色左輪格觸摸綠色輪廓的右側格。無法消除2個水平div之間包含div的空間

儘管我努力使用填充和邊距，但2個div之間的空間不會消失。

我已經看過如此多的答案，但至今沒有人破它歸結爲這個簡單的例子 - 我的小提琴顯示了這個問題，在

這裏是非常簡單的代碼：

<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>

來源

2011-11-27 wantTheBest

試試這個：

<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>

來源

2011-11-27 01:47:55

我將其添加到我的代碼 - 它的作品。我沒有用「浮動」與「顯示：inline-block的」，不知道你能做到這一點，我還以爲你要麼使用一個或其他 - 教訓。我仍然不確定爲什麼填充：0和保證金：0我試過零效應。我添加了一個清晰的代碼：下面的div和我的代碼的其餘部分都是A-OK - 謝謝。 – wantTheBest

如果您閱讀了我的評論 - 當我看着您的jsfiddle時，jsfiddle屏幕上的完全不同的窗口中只有一個花括號。然而，尼克把代碼*置於上下文中 - 我不必猜測爲什麼我的代碼表現不同。我再一次向上 - 向你。如果你想解釋你在jsfiddle的單獨窗口中的大括號中的float是如何解決我的問題的，請告訴我 - 我仍然沒有看到連接 - 我的答案是'use float'，但沒有上下文我可以掌握，對不起，我是CSS新手（僅限3天），新手入手jsfiddle（僅限1天）。 – wantTheBest

簡單但有幫助 – Julisch

使用float屬性。

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

來源

2011-11-27 01:44:40

您的div之間呈現的空間（表示爲點），空格倒塌，在：

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

相反，嘗試編碼是這樣的：

</div><div>

並且差距將消失。

來源

2013-05-03 22:19:48

這是這個問題的真正解釋。謝謝。 – Alconis

內聯塊之間的源空白會導致佈局中出現空隙。通過去除空間（無論是單個空間還是某些換行符都無關緊要），元素將按預期方式觸摸。

代碼的格式化可以保留很小的代價，可以通過註釋空白或在標籤內部使空白髮生。

使用註釋：

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

內標籤放置換行符：

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

來源

2014-03-10 03:13:33 HulkingUnicorn

像@Juan拉努斯說，他的回答，這是導致您的問題的空白。

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

但你需要隨後也對孩子設定font-size: initial（或非零值），DIV，所以你仍然可以看到你的文字。

來源

2017-05-11 22:47:36

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

回答

相關問題