Question

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

尽管我努力使用填充和边距，但两个div之间的空间不会消失。

我已经看了很多关于SO的答案，但到目前为止还没有人将其分解为这个简单的例子 - 我的小提琴显示了这个问题，在

以下是非常简单的代码：

<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; }的示例：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（或非零值），这样您仍然可以看到自己的文字。

不能消除包含div的2个水平div之间的空间

5 个答案: