什么在此表单中的元素之间提供边距答案

【问题标题】：what is giving margin between the elements in this form什么在此表单中的元素之间提供边距
【发布时间】：2016-11-30 19:25:09
【问题描述】：

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

我看不出是什么导致了form-group 和按钮之间以及form-groups 之间的间隙。当我使用启用 flexbox 的 bootstrap 4 时，我的所有元素（输入和按钮）都会折叠，它们之间没有任何边距。

如何查看导致突出显示的form-group 及其旁边的按钮的原因？我无法通过 chrome 检查器找到它。

谢谢。

【问题讨论】：

我们需要的不仅仅是一张图片来帮助，我很确定你知道如何提出一个正确的问题:)，所以请发布一个最小的工作代码 sn-p 来重现这个问题跨度>
抱歉措辞有误。我的问题在上面的链接（bs4 doc）中，是什么导致了空间以及如何通过 chrome 检查器查看它。
对不起，我的回答以为您在询问名称输入框和电子邮件标签之间的空白，但是在谈论电子邮件文本框和按钮之间的空白时，答案是相同的。从 html 中删除空格，按钮将位于电子邮件文本框旁边。
您还应该注意，该引导页面上的示例使用边框框，并且元素未设置为 display:flex;因此，如果您使用的是 flexbox 布局，我认为它应该会像您在代码中看到的那样混合在一起。但是，我绝对不是 flexbox 方面的专家。

标签： css twitter-bootstrap google-chrome-devtools

【解决方案1】：

这有点棘手，但它与两个 DIVS 设置为 display:inline-block 的事实有关，这意味着它们是内联格式化上下文的一部分，并且每个 div 几乎表现得好像它是一个词在一句话中。我们想要渲染单词之间的空格，所以 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

【讨论】：

您可以使用 .btn{ margin:-4px; 删除按钮和文本框之间的空间。 } 在代码笔示例中的 CSS 中。
您也可以这样做以删除名称文本框和电子邮件标签之间的空格。
是 .form-control{ 边距：-4px; } 将删除所有空间
我误读了他的问题，我在回答中所说的也适用于按钮和电子邮件文本框之间的空白。删除 html 中的空白将删除呈现的空间。
对，但我在回答“空白从何而来，我如何在 chrome 检查器中看到它？”的问题