Javascript JS-为什么在正常流中div之间有空间

我想根据容器div的大小并排放置两个div。第二个div位于第一个div之下，因为它们之间有4个像素的间隙。为什么，更重要的是，这是什么？边距、填充和边框为0px，以使其更干净

<div id='container' width='300'>
  <div id='left' width='150'></div>
  <div id='right' width='150'></div>
</div>

我知道你可以使用浮动来实现目标，但我想知道原因

我还注意到，当我得到一个元素的width（）时，我没有得到与调试窗口中相同的数字。有线索吗

谢谢

编辑：好的，我知道他们之间是一个''，因为新行字符。不过，它是“内联块”还是“块”似乎并不重要。但是，将容器设置为显示为“flex”似乎是一个解决方案

（同时感谢您就如何删除空格提出的建议，即使div之间有空格字符！由于声誉低下，我仍然无法提高投票率…

比较：

<div>
  a
  b
</div>

A.
B

与：

ab

显示的元素：内联块

被视为文本

它们之间有空格，因为它们是内联元素，在标记中它们之间有空格字符

---

将第二个div的开始标记紧跟在第一个div的结束标记之后，它们之间没有任何空格、制表符或新行。

问题在于内联/内联块元素尊重空格，包括新行字符，它们也占用空间。因此，如果删除元素之间的所有空格，将解决此问题：

<div id='container'>
    <div id='left'>&nbsp;</div><div id='right'>&nbsp;</div>
</div>

---

演示：其原因是内联块元素：-

您可以这样尝试：-

<div id='container'>
    <div id='left'>&nbsp;</div><div id='right'>&nbsp;</div>
</div>

或

<div id='container'>
    <div id='left'>&nbsp;</div><div id='right'>&nbsp;</div>
</div>

<div id='container'>
    <div id='left'>&nbsp;</div><!--
 --><div id='right'>&nbsp;</div>
</div>