CODEWITHSUNDEEP
csstextpadding
left click
left click

Reputation: 894

How to get rid of padding added automatically to div vertically?

I think this padding is always added to all elements, but it is inconvenient for vertical margin calculation because of this padding. I want to get rid of this padding. What should I do?

div { background-color:DodgerBlue; }
<div>ABCDE</div>

result

qwdqwdqwd

Upvotes: 2

Views: 269

Answers (2)

Subash
Subash

Reputation: 7266

You are getting the spacing on top and bottom of the text as your text is smaller than the containing container. Its actually not a padding (At least padding in terms of CSS).

You could either increase the line height of the text so that the text occupies more space and fits the container, or you could increase the font size to achieve the same.

div { 
  background-color:DodgerBlue; 
  line-height: 12px;
}
<div>ABCDE</div>

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157374

Not sure why you want to do that, but anyways, you can use line-height to get rid of the extra spacing at the top and bottom

div {
  background-color: DodgerBlue; 
  line-height: 12px;
}

Demo | Demo 2 (with font-size)

Upvotes: 1

Related Questions