html - 内联块元素的边距

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 中的任何内容。