CSS显示：inline-block不接受margin-top？

Posted 2023-03-06

【中文标题】CSS显示：inline-block不接受margin-top？

【英文标题】：CSS display: inline-block does not accept margin-top?

【发布时间】：2011-11-28 11:44:21

【问题描述】：

我有一个带有 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 似乎只适用于正值。

【问题讨论】：

确定可以，如果您需要我们的帮助，请发布您遇到问题的标记和 css

否，为了进一步提供帮助，我们需要查看您的代码。这是一个有用的链接虽然blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block

我有几个布局，内联块元素使用边距定位，甚至是顶部边距

【参考方案1】：

您也可以尝试将负边距替换为

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

除了你的 .label 风格的其余部分

【讨论】：

position: relative 会将元素相对于其位置向上移动 2px，但不会移动其下方的其余内容。还是谢谢。

你可以添加margin-bottom:-2px到.label来平衡它，你不必添加额外的div。但是，如果您想将所有内容从标签向下移动，那么在 .label 之前的任何内容上设置 margin-bottom:-2px 会不会更容易？

内联块元素的负边距顶部或底部不起作用，正如我们之前发现的那样。 :)

不是一个好的解决方案。 position:relative; 总是占用空间。你最终在下面有不必要的2px。

【参考方案2】：

我使用了display: table。它具有 inline-block 的内容拟合属性，但也支持负边距，从而将跟随它的内容一起移动。可能不是您应该如何使用它，但它确实有效。

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

【讨论】：

对与否，我不知道，但它也解决了我的问题。

@baohouse 太棒了！

【参考方案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。

【讨论】：

2018年在em(或%)中使用vertical-align的可靠性如何？

【参考方案4】：

确实如此。您可以使用填充来代替边距。另一种解决方案是为元素使用容器 div。您将那个 div 设为inline-block，并将您当前的元素设为该容器内的一个块。然后，您可以为元素设置边距。

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

【讨论】：

它似乎在 chrome 和 IE8 中运行良好。这是浏览器特定的问题吗？ jsfiddle.net/PeNks

我需要一个负边距，它似乎确实适用于正边距。 :(

lteIE7仅在应用于inline元素时支持inline-block，不支持s等块元素。