CODEWITHSUNDEEP
htmlmargincss
kapoko
kapoko

Reputation: 988

Margin on inline-block element

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.

Upvotes: 0

Views: 2027

Answers (2)

Jacqui Dorrough
Jacqui Dorrough

Reputation: 134

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.

Upvotes: 0

Godwin
Godwin

Reputation: 9907

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/

Upvotes: 2

Related Questions