内联块元素的边距

Question

HTML：

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

CSS：

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

请参阅此处的小提琴：http://jsfiddle.net/ThySQ/2/

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

Answer 1

为内联内容添加负余量不起作用（至少在大多数浏览器上）。如果要向上移动文本，可以相对定位元素，并将顶部设置为负数。

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

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

Answer 2

您需要对div应用填充以在div中应用额外的空格。

.badge {
   display: inline-block;
   margin-top: -2px;
   padding: 4px;  /* sets up a 4px margin all around the inside edge of the div */

}   

这会影响div中的任何内容。