Margin on inline-block element

Question

HTML:

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

CSS:

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

See fiddle here: http://jsfiddle.net/ThySQ/2/

How to give the text in the div a margin? It doesn't seem to work like this.

Answer 1

Adding a negative margin to inline content won't work (at least on most browsers). If you want to move the text upwards you can position the element relatively and set the top to a negative number.

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

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

Answer 2

You need to apply padding to the div to have the extra space applied within the div.

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

}   

That will affect whatever content is within the div.