Question

这将是一个CSS家伙拍他的额头并且去＃34;你必须开玩笑的事情之一＆＃34;，为此我道歉。我也很抱歉因为无法在Stackoverflow上找到类似的问题，我很确定，它必须是一个。

你会注意到其中有两个标签：

<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>

我所想要的是，如果您输入ENTER（在Chrome和Edge中）并因此在第一个和第二个div之间创建换行符，则绿色和红色块不再位于同一行。但没有改变CSS。没有标记改变。我不明白为什么（而且我理解这一点并不重要）文本文档中的换行符会在标记的呈现中创建一个新行。但显然确实如此。

示例：

我还没有进入ENTER，

更新：好像之前已经回答过这个问题。 Here是一个很好的链接，可以了解正在发生的事情。

Answer 1

这不是问题的实际换行符，而是您在两个div元素之间输入任何空格的事实。

因为你创建了它们inline-block，这使得它们的行为就像内联元素，如果没有间距，它们就会彼此相邻。

但是，当您在它们之间插入空格时，布局算法会发现20% + white space + 80%超过100%，因此将第二个div放在新行上。

您可以通过创建第二个div 79%来验证此行为，同时添加空格（或换行符）。在这种情况下，div元素仍将彼此相邻。

Answer 2

另一个解决方案而不是79％使用top元素font-size等于0，这里是一个https://jsfiddle.net/fqxna79a/2/的例子

body{
 font-size: 0;
}

#left, #right {
 font-size: 16px;
}