CSS display: inline-block 不支持 margin-top 吗？

Question

我有一个display: inline-block的元素，但似乎无法接受margin-top属性。这是因为该元素仍然被视为内联元素吗？

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

---

编辑 #1：

我的CSS非常简单：

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

我最终将内容包装在另一个 div 中，并给它添加了一个 margin-top。但这会导致很多额外的标记，使我的代码变得不够清晰。

编辑 #2:

inline-block 元素上的 margin-top 和 margin-bottom 似乎只对正值起作用。

- Gregory Bolkenstijn

---

如果你需要我们的帮助，那么请贴出你遇到问题的标记和CSS代码。没问题，我们会帮你解决的。 - bevacqua

抱歉，我们需要查看您的代码才能提供更多帮助。不过这里有一个有用的链接：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ - CBRRacer

我有几个布局，其中包含使用margin定位的inline-block元素，甚至包括margin-top。 - Einacio

Answer 1

你也可以尝试使用替代负边距的方式

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

除了你的.label样式的其余部分之外

- Einacio

---

相对定位将把元素相对于它原来的位置向上移动2像素，但不会移动其他内容。无论如何，谢谢。 - Gregory Bolkenstijn

你可以在.label上添加margin-bottom:-2px来平衡它，而无需添加额外的div。但是，如果您想将标签(label)下方的所有内容移动下来，将在label之前的任何内容设置为margin-bottom:-2px不是更容易吗？ - Einacio

如我们之前发现的那样，在内联块元素上使用负的 margin-top 或 margin-bottom 是无效的。 :) - Gregory Bolkenstijn

不是一个好的解决方案。position: relative;总是占据空间。最终会在下方产生不必要的2px。 - Green

Answer 2

我使用了 display: table。它具有内联块元素的内容适应属性，但也支持负边距的方式，可以将其后面的内容一起向上移动。这可能不是你应该使用的方式，但它有效。

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

- baohouse

---

我不知道是不是正确的，但这也解决了我的问题。 - Mike Wills

@baohouse 太棒了！ - Null isTrue

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中，垂直对齐效果不好。而且还存在Opera(11.64)的渲染bug。

所以，我建议使用position:relative代替。

- Zachary

---

在2018年，使用em（或％）的vertical-align的可靠性如何？ - Hemant_Negi

@Hemant_Negi 只要你使用的是一个合理的布局引擎（我认为 IE ≥ 8 就可以），就应该没问题。 - Alex Shpilkin

Answer 4

这的确是正确的。你可以使用内边距来代替外边距。另一个解决方案是为元素使用一个容器 div。你可以将该 div 设置为 inline-block，并使当前元素在该容器内成为块级元素。然后，你可以给该元素设置外边距。

最好提供一个具体的示例，最好在 jsfiddle.net 上。这将有助于回答更具体，而不仅仅是像我这里一样的一般说明。;)

- GolezTrol

---

看起来在 Chrome 和 IE8 中工作正常。这是浏览器特定的问题吗？http://jsfiddle.net/PeNks/ - James Montagne

我需要一个负边距，正边距似乎不起作用。 :( - Gregory Bolkenstijn

lteIE7只支持将inline-block应用于内联元素，它不适用于块级元素，如<div>。 - Simon