保證金inline-block的元素

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有專區內應用的額外空間。

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

} 

這將影響div內的任何內容。