bootstrap form-inline 和 form-group 中 <label> 标记周围的空白答案

【问题标题】：White space around <label> tag in bootstrap form-inline and form-groupbootstrap form-inline 和 form-group 中 <label> 标记周围的空白
【发布时间】：2019-01-21 00:05:49
【问题描述】：

查看 bootstrap Inline form 文档时，您可以看到标签和输入之间有一个空格（下面用黄色标记）：

在 chrome 开发工具中检查它时，我看不到任何边距/填充/等。

更重要的是，通过复制粘贴引导程序的示例代码创建了这个简单的StackBlitz project，但根本没有空格！

（注意：在我的 StackBlitz DEMO 中，稍微拉伸右侧的显示以应用内联表单样式。）

我的问题其实是两个问题：

bootstrap 文档页面中的空白区域来自哪里？
在 chrome 开发工具中检查此空白时，如何查看应用此空白的样式？

非常感谢。

【问题讨论】：

如果您检查父级的 HTML，您会看到标签之间有一个空格。

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

【解决方案1】：

大多数浏览器将源代码中的换行符呈现为内联元素的空白。如前所述，您可以将 font-size 设置为 0 以防止这种情况发生。

检查引导示例页面的源代码实际上不仅会发现换行符，甚至会发现特定元素的空格。您发布的那个 Angular-App 可能会在呈现源代码之前去除所有换行符和空格。

【讨论】：

感谢您的回答。您能否更详细地解释换行和空白检查，它告诉我们什么？另一件事，您能否更详细地解释 您发布的那个 Angular-App 在渲染源代码之前可能会去除所有换行符和空格是什么意思，您所说的条？它是怎么做到的？以及如何在检查中看到这一点？

【解决方案2】：

内联和内联块元素周围有空白/间隙。

人们解决这个问题的一种方法是将父元素的字体大小设置为font-size: 0;，然后为子元素指定所需的字体大小。

我希望这可以解释。

【讨论】：

感谢您的回答，它帮助我了解了这里发生的情况，以及块周围的间隙。你能解释一下为什么我附加的 DEMO 样本中没有空白吗？我可以看到正文有字体大小，所以我不明白为什么这也没有出现差距。

【解决方案3】：

内联块被视为文本元素，因此周围的空格和换行符被视为空白。

<div class="inline-block">A</div>
<div class="inline-block">B</div>

div A 和 div B 之间的换行符作为空格输出。以下是基于 html 的抑制空白的方法

<div class="inline-block">A</div><!-- comment suppresses white space
--><div class="inline-block">B</div>

<div class="inline-block">A</div><div class="inline-block">B</div>  <!--everything on same line without spaces-->

【讨论】：