CSS显示：内联块不接受margin-top？

Question

我有一个带有display：inline-block的元素，但它似乎不接受margin-top。这是因为该元素仍被视为内联元素吗？

如果是，是否有人有解决方法？

---

编辑＃1 ：

我的CSS非常简单：

.label {
  background: #ffffff;
  display: inline-block;
  margin-top: -2px;
  padding: 7px 7px 5px;
}

我最终将内容包装在另一个div中并给出了一个优势。但这会导致大量额外的标记，并使我的代码不那么清晰。

编辑＃2 ：

margin-top＆amp; margin-bottom元素上的inline-block似乎只能使用正值。

Answer 1

您也可以尝试用

替换负边距

.label{
    position:relative;
    top:-2px;
}

除了.label样式的其余部分

Answer 2

我使用了display: table。它具有内联块的内容拟合属性，但也支持负边距，以便随后将内容随之移动。可能不是你应该如何使用它，但它可以工作。

Answer 3

您可以尝试这样vertical-align：

.label {
  background: #ffffff;
  display: inline-block;
  margin-top: -2px;
  vertical-align: 2px;
  padding: 7px 7px 5px;
}

我在jsfiddle上做了一个例子：http://jsfiddle.net/zmmbreeze/X6BjK/ 但是纵向对齐在IE6 / 7上运行不佳。还有一个歌剧（11.64）渲染错误。

所以我建议改为使用position:relative。

Answer 4

情况确实如此。您可以使用填充而不是边距。另一种解决方案是使用容器div作为元素。你创建div inline-block，并使当前元素成为该容器内的块。然后，您可以为元素留出余量。

如果你有一个具体的例子，最好是在jsfiddle.net左右，这会有所帮助。这也有助于解答更具体，而不仅仅包含像我这样的一般描述。 ;）