无法消除包含 div 的 2 个水平 div 之间的空间答案

【问题标题】：cannot eliminate space between 2 horizontal divs inside containing div无法消除包含 div 的 2 个水平 div 之间的空间
【发布时间】：2011-11-27 01:42:00
【问题描述】：

应该很容易吧？只需将包含 div 的外部填充设置为零，并将外部 div 内的两个并排 div 设置为 margin:0 但这对 2 个水平 div 之间的空间没有影响。我需要的是红色轮廓的左侧 div 来触摸绿色轮廓的右侧 div。

尽管我努力使用填充和边距，但 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>

【问题讨论】：

标签： html css

【解决方案1】：

在您的 div 之间呈现的空间是空格（表示为点），折叠在：

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

请尝试如下编码：

    </div><div>

然后差距就会消失。

【讨论】：

这是对这个问题的真正解释。谢谢。

【解决方案2】：

使用float 属性。

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

【讨论】：

【解决方案3】：

源代码中的内联块之间的空白会导致布局中的间隙。通过删除空格（无论是单个空格还是某些换行符都无关紧要），元素将按预期进行。

可以通过注释掉空格或使空格出现在标签中来保留代码的格式，但代价很小。

使用 cmets：

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

在标签内放置换行符：

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

【讨论】：

【解决方案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>

【讨论】：

我将它添加到我的代码中——它有效。我没有使用 'float' 和 'display:inline-block'，不知道你能做到这一点，我以为你使用了其中一个 - 经验教训。我仍然不确定为什么我尝试的 padding:0 和 margin:0 效果为零。我在下面添加了一个明确的：两个 div 和我的其余代码是 A-OK - 谢谢。
如果您阅读了我的评论——当我查看您的 jsfiddle 时，jsfiddle 屏幕上一个完全不同的窗口中只有一个花括号中的浮点数。然而，尼克将代码放在上下文中——我不必猜测为什么我的代码表现不同。我再次向上箭头你。如果想在 jsfiddle 的单独窗口中解释花括号中的浮点数如何解决我的问题，请告诉我——我仍然看不到连接——我从你的回答中得到的是“使用浮点数”，但没有上下文我可以理解，对不起，我是 CSS 新手（仅限 3 天）和 jsfiddle 新手（仅限 1 天）。

【解决方案5】：

就像@Juan Lanus 在他的回答中所说，这是导致您的问题的空白。

另一种解决方案是在包含的 div 上设置 font-size: 0px。

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

【讨论】：