CSS 显示：inline-block 不接受 margin-top？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7611030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS display: inline-block does not accept margin-top?
提问by Gregory Bolkenstijn
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?
我有一个带有 display: inline-block 的元素，但它似乎不接受 margin-top。这是因为该元素仍被视为内联元素吗？
If yes, does anyone have a workaround?
如果是，有人有解决方法吗？
EDIT #1:
编辑#1：
My CSS is quite simple:
我的 CSS 很简单：
.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.
我最终将内容包装在另一个 div 中并给它一个边距顶部。但这会导致很多额外的标记并使我的代码不太清晰。
EDIT #2:
编辑#2：
margin-top& margin-bottomon inline-blockelements only seems to work with positive values.
margin-top& margin-bottomoninline-block元素似乎只适用于正值。
采纳答案by baohouse
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.
我用过display: table。它具有 inline-block 的内容拟合属性，但也支持负边距，这种方式将随之移动跟随它的内容。可能不是您应该如何使用它，但它确实有效。
回答by Einacio
you can also try replacing the negative margin with
你也可以尝试用
.label{
position:relative;
top:-2px;
}
in addition to the rest of your .labelstyle
除了你的其他.label风格
回答by Zachary
You can try vertical-alignlike this:
你可以这样试试vertical-align：
.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.
我在 jsfiddle 上做了一个例子：http: //jsfiddle.net/zmmbreeze/X6BjK/。
但是垂直对齐在 IE6/7 上效果不佳。还有一个歌剧（11.64）渲染错误。
So I recommend to use position:relativeinstead.
所以我建议position:relative改用。
回答by GolezTrol
That is indeed the case. Instead of a margin, you could use a padding. Another solution would be to use a container div for the element. You make that div inline-block, and make your current element a block inside that container. Then, you can give a margin to your element.
情况确实如此。您可以使用填充来代替边距。另一种解决方案是为元素使用容器 div。您制作该 div inline-block，并使您的当前元素成为该容器内的一个块。然后，您可以为元素留出边距。
It would help if you got a concrete example, preferably in jsfiddle.net or so. It would help answers to be more specific too, instead of containing just general descriptions like mine here. ;)
如果你有一个具体的例子会有所帮助，最好是在 jsfiddle.net 左右。这也将有助于答案更具体，而不是像我这里的那样只包含一般性描述。;)
