html - 行内 block 元素的边距

Question

HTML:

hello there! <div class='badge'>give this a small margin.</div> Please!​

CSS:

.badge {
   display: inline-block;
   margin-top: -2px;
}    

在这里查看 fiddle :http://jsfiddle.net/ThySQ/2/

如何给div中的文字留边距？它似乎不是这样工作的。

Answer 1

向内联内容添加负边距是行不通的(至少在大多数浏览器上是这样)。如果你想向上移动文本，你可以相对定位元素并将顶部设置为负数。

.badge {
   display: inline-block;
   top: -2px;
   position: relative;
}

http://jsfiddle.net/ThySQ/4/