Bootstrap 4按钮示例:按钮之间的空间来自哪里？

Question

我试图检查Bootstrap 4中的"按钮"示例.它们有一个看起来很漂亮的按钮,如下所示:

http://getbootstrap.com/docs/4.0/components/buttons/

但我不明白,按钮之间的空间来自哪里.

这不是边距,不是柔性框对齐,不是透明边框.那么,它是如何工作的？实际上,我禁用了dev-tools中的所有样式,但该空间并没有消失.

Answer 1

空间就在那里,因为HTML元素之间有空格.如果删除空格,则按钮将彼此相邻.

请注意,元素之间的空格(换行符)由浏览器压缩到单个空格.

<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button>

现在,如果我们删除空格:

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button>