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

Question

我有一个显示元素:inline-block,但它似乎不接受margin-top.这是因为元素仍被视为内联元素吗？

如果是,有没有人有解决方法？

---

编辑#1:

我的CSS非常简单:

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

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

编辑#2:

margin-top&margin-bottomon 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左右.这也有助于解答更具体,而不仅仅包含像我这样的一般描述.;)