css - 什么在这种形式的元素之间留出余量

Question

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

我看不出是什么导致了 form-group 和按钮之间以及 form-group 之间的差距。当我在启用 flexbox 的情况下使用 bootstrap 4 时，我的所有元素(输入和按钮)都折叠起来，它们之间没有任何边距。

如何查看是什么导致 form-group 突出显示并旁边有按钮？我无法通过 chrome inspector 找到它。

谢谢。

Answer 1

这是一件棘手的事情，但它与两个 DIVS 设置为 display:inline-block 的事实有关，这意味着它们是内联格式化上下文的一部分，并且每个 div 几乎就像是句子中的一个词。我们希望渲染单词之间的空格，因此html非常巧妙地暗示html中的空格应该渲染为空格。在 chrome inspector 中，它格式化元素树的方式对你隐藏了这一点，但如果你在 chrome inspector 中编辑父元素上的 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