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

发布于 2024-12-07 03:53:32 字数 536 浏览 0 评论 0原文

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

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

编辑 #1：

我的 CSS 非常简单：

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

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

编辑#2：

margin-top & inline-block 元素上的 margin-bottom 似乎仅适用于正值。

原文

I have an element with display: inline-block, but it doesn't seem to accept margin-top. Is this because the element is still treated as an inline element?

If yes, does anyone have a workaround?

EDIT #1:

My CSS is quite simple:

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

I ended up wrapping the content in another div and giving that a margin-top. But that causes a lot of extra markup and makes my code less clear.

EDIT #2:

margin-top & margin-bottom on inline-block elements only seems to work with positive values.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遗忘曾经 2024-12-14 03:53:32

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

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

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

you can also try replacing the negative margin with

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

in addition to the rest of your .label style

回复收藏 0 原文

谢绝鈎搭 2024-12-14 03:53:32

我使用了display: table。它具有内联块的内容适配属性，但也支持负边距，这种方式会随之移动其后面的内容。可能不是你应该如何使用它，但它确实有效。

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

I used display: table. It has the content-fitting properties of inline-block but also supports negative margins in a way that will shift the content following it up along with it. Probably not how you should be using it, but it works.

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

回复收藏 0 原文

云归处 2024-12-14 03:53:32

你可以像这样尝试 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) 渲染错误。

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

You can try vertical-align like this:

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

I made an example on jsfiddle: http://jsfiddle.net/zmmbreeze/X6BjK/.
But vertical-align not work well on IE6/7. And there is a opera(11.64) rendering bug.

So I recommend to use position:relative instead.

回复收藏 0 原文