css - twitter bootstrap 渲染问题(文档中的按钮样式与本地使用不同)

Question

我在一个元素中使用 twitter bootstrap，在查看文档时，我遇到了一个非常奇怪的问题 - 如果可以这样称呼的话。

关于 http://twitter.github.com/bootstrap/base-css.html#buttons , 有很多按钮并排显示。它们似乎有间距，但计算样式(在我调查的 Firefox 和 Safari 中)如下:

margin-top: 0
margin-right: 0
margin-bottom: 0
margin-left: 0

这不应呈现为各个按钮之间 10~px 的间距。

9/14px 的 padding 似乎只是用来显示按钮形状的。

现在，当我在自己的元素中使用 Twitter Bootstrap 时，我从 Twitter Bootstrap 文档站点看到的边距似乎在本地不起作用 - 按钮相互粘在一起，没有间距。这可以通过简单的本地 margin 来纠正，但我想知道为什么它与文档不同。另外:为什么它不显示在 firebug 或其他开发人员工具中？

Answer 1

所有按钮都添加了 display:inline-block 属性，display:inline-block 依赖于从其容器继承的字体大小.如果将包含按钮的 p 标记上的 font-size 设置为 0 或删除 html, body和 p 标签 font-size 你可以看到那个空间是如何被删除的。