CODEWITHSUNDEEP
htmlcssfrontend
kacperpll
kacperpll

Reputation: 59

How to override line-height from parent element

I have a problem with changing the line-height of a child element. My goal is just to reset line-height to normal value instead of using the higher value of its parent.

a{ line-height:100px; }
a small{ line-height:10px; //or normal }

So I want the line-height of small to normal but it doesn't work.

Any ideas?

Small Demo

Upvotes: 5

Views: 3654

Answers (2)

Awsme Sandy
Awsme Sandy

Reputation: 1408

Here is the updated fiddle i just added display:inline-block

.first small{
  line-height:normal;
  display: inline-block;
}

Upvotes: 2

Ben Hull
Ben Hull

Reputation: 7673

Use:

small {
  display: inline-block;
  line-height: 1; /*or whatever you like.*/
}

You need inline-block, as <small> is inline by default, and so inherits its parent's line height.

Upvotes: 15

Related Questions