无法消除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的空间

回答

相关问题