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/