在将margin-top设置为ZERO后，为什么此按钮仍然位于顶部？

Question

该示例可在http://www.bootply.com/143jVqzP0A#

找到

按钮看起来像这样

虽然我将margin-top设置为0，但它在顶部有余量。我希望按钮垂直填充整个块，按钮与其父块之间没有边距或空格。

有没有人有这方面的想法？谢谢！

Answer 1

因为你已经使用过

display:inline-block，

给vertical-align:top

按钮。它会解决这个问题。您也可以尝试将vertical-align:top提供给h2。

Answer 2

由于h2的填充。试试这个：

.filter h2{ padding: 0; margin:0; margin-left: 3px; }

Answer 3

将保证金设为负值......

margin-top: -10px; //change value accordding to your preference.

希望它有所帮助;

Answer 4

默认情况下，

button是inline元素 这就是为什么它会为前一行和下一行文本垂直占用一些空格（如果有的话）。

您可能希望应用display: block;和float: left;来解决问题。

Answer 5

<button class="btn btn-xs btn-default" style="margin-top: 0; height:28px">

<h2>Factors</h2>

元素高28像素，正在拉伸包含按钮的分割（和背景）。在顶部添加几个像素。

或者，从该容器中删除h2标签。

Answer 6

在bootstrap.min.css的这个规则：

.btn-xs, .btn-group-xs > .btn 

您必须将填充设置为0并且看起来很好。