Html 这是JSFIDLE的错误吗

我有一个区域，我想在里面添加两个按钮。代码非常简单：

<div id="switcher"> 
 <div class="button" id="Sunday">Sunday</div>
 <div class="button" id="mic">mic</div>
 </div>

星期日
麦克风

演示在

如果我们使用相同的CSS，但在一行中重写两个元素的代码：

<div id="switcher"> 
<div class="button" id="Sunday">Sunday</div><div class="button" id="mic">mic</div>
</div>

圣代米奇

演示在 在第一种情况下，似乎有一个断线，但JSFIDLE无法识别它

这是JSFIDLE的bug吗

---

谢谢。

不，这就是

显示：内联块工作。它对元素周围的空格很敏感（就像
display:inline；
），因此：

<div id="switcher">
    <div class="button" id="Sunday">Sunday</div>
<div class="button" id="mic">mic</div>
</div>


星期日
麦克风

与此不同：

<div id="switcher">
    <div class="button" id="Sunday">Sunday</div><div class="button" id="mic">mic</div>
</div>


圣代米奇

这会影响渲染，因为浏览器将渲染两个
.button
元素之间的空间。因此，它们不再适合同一条生产线

在
中有更多关于内联块的内容，不，这就是
显示：内联块工作。它对元素周围的空格很敏感（就像
display:inline；
），因此：

<div id="switcher">
    <div class="button" id="Sunday">Sunday</div>
<div class="button" id="mic">mic</div>
</div>


星期日
麦克风

与此不同：

<div id="switcher">
    <div class="button" id="Sunday">Sunday</div><div class="button" id="mic">mic</div>
</div>


圣代米奇

这会影响渲染，因为浏览器将渲染两个
.button
元素之间的空间。因此，它们不再适合同一条生产线

在
中有更多关于内联块的内容，这不是因为它们在同一行上，而是因为两个div之间没有空格。将第二个更改为：

<div class="button" id="Sunday">Sunday</div> <div class="button" id="mic">mic</div>

Sunday麦克风

它的行为和第一个一样。这与JSFIDLE无关，只是HTML的工作方式：如果没有分隔符，它就不会断行。
这不是因为它们在同一行，而是因为两个div之间没有空格。将第二个更改为：

<div class="button" id="Sunday">Sunday</div> <div class="button" id="mic">mic</div>

Sunday麦克风

它的行为和第一个一样。这与JSFIDLE无关，只是HTML的工作方式：如果没有分隔符，它就不会断线。
这是因为
切换器的宽度

当你用换行符写代码时，在div之间会有一点“空白”。2
按钮的宽度加上“空白”大于切换开关的宽度

这是因为
切换器的宽度

当你用换行符写代码时，在div之间会有一点“空白”。2
按钮的宽度加上“空白”大于切换开关的宽度

我相信它算作1个空格。你可以通过在浏览器中拖动选择来判断-你应该看到元素之间有一个空格。无论两个div之间有多少个“换行符”，它只会打印一个空格。您可以在这里找到一些方法来防止内联块元素之间出现空格：我相信它算作1个空格。你可以通过在浏览器中拖动选择来判断-你应该看到元素之间有一个空格。无论两个div之间有多少个“换行符”，它只会打印一个空格。您可以在此处找到一些防止内联块元素之间出现空白的方法：