什么是这种形式的元素之间的边际

Question

请看示例 http://v4-alpha.getbootstrap.com/components/forms/#inline-forms

我无法看到导致form-group和按钮之间以及form-group之间的差距的原因。当我使用启用了flexbox的bootstrap 4时，我的所有元素（输入和按钮）都会折叠，而它们之间没有任何边距。

如何查看导致form-group突出显示的内容及其旁边的按钮？我无法通过镀铬检查员找到它。

感谢。

Answer 1

这有点棘手，但它与两个DIVS设置为display:inline-block的事实有关，这意味着它们是内联格式化上下文的一部分，并且每个div的行为几乎就像它＆ ＃39;一句话中的单词。我们希望渲染单词之间的空格，因此html非常巧妙地暗示html中的空格应该呈现为空格。在chrome检查器中，它格式化元素树的方式会隐藏这一点，但如果您在chrome检查器中编辑父元素上的html并删除空间，则可以重新创建您在我的codepen示例中看到的内容。

这是一个代码笔，用于演示：http://codepen.io/MarkAtRamp51/pen/XKYNpZ

注意两者之间的区别：

摘录自HTML，显示两个表单组之间的空格

<input type="text" class="form-control" id="exampleInputName2"
placeholder="Jane Doe">   </div>   
<div class="form-group">
     <label for="exampleInputEmail2">Email</label>

和

<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div><div class="form-group">
    <label for="exampleInputEmail2">Email</label>

请注意，在第二个示例中，两个DIV彼此相邻。

您可以在此处找到有关此内容的更多信息： https://css-tricks.com/fighting-the-space-between-inline-block-elements/和 https://www.w3.org/TR/CSS2/visuren.html