CSS显示:内联块不接受margin-top?
我有一个显示元素:内联块,但它似乎并不接受margin-top。 这是因为元素仍然被视为内联元素?
如果是的话,有没有人有解决方法?
编辑#1 :
我的CSS很简单:
.label { background: #ffffff; display: inline-block; margin-top: -2px; padding: 7px 7px 5px; }
我最终把内容包装在另一个div中,并给出了一个边缘。 但是,这会导致很多额外的标记,使我的代码不太清楚。
编辑#2 :
inline-block
元素上的margin-top
和margin-bottom
似乎只能用正值。
我用display: table
。 它具有inline-block的内容拟合属性,但也支持负边距,以便随后移动内容跟随它的内容。 可能不是你应该如何使用它,但它的工作原理。
您也可以尝试用replace负边距
.label{ position:relative; top:-2px; }
除了你的.label
风格的其余部分
你可以尝试像这样vertical-align
:
.label { background: #ffffff; display: inline-block; margin-top: -2px; vertical-align: 2px; padding: 7px 7px 5px; }
我在jsfiddle上做了一个例子: http : //jsfiddle.net/zmmbreeze/X6BjK/ 。
但垂直alignment在IE6 / 7上不能很好地工作。 有一个歌剧(11.64)渲染错误。
所以我build议使用position:relative
来代替。
事实确实如此。 而不是一个保证金,你可以使用填充。 另一个解决scheme是使用元素的容器div。 你使该inline-block
,并使您的当前元素在该容器内的块。 那么,你可以给你的元素留有余地。
这将有助于如果你有一个具体的例子,最好在jsfiddle.net左右。 这将有助于更具体的答案,而不是像我这里只包含一般的描述。 ;)