CMS Development

SGriffinKatzcy
Teilnehmer/-in | Gold Partner
Teilnehmer/-in | Gold Partner

Body line-height overriding footer line-height (even with Important)

lösung

Hi. In the footer of http://cylera-7852770.hs-sites.com we have a few text modules (the 3 sentences of text: "Cylera is a..." "It's time to see..." and "Together we can...") that have an inline style rule of "line-height: 19px !important". For some reason, the line height says it's 19px, but when using Chrome's dev tools to adjust it, the height doesn't change until I increase it to 23px. So it's actually displaying as 22px, which is the default body line-height. If we have rules that are overriding that default value, why is the size still rendering as the body's default 22px?

0 Upvotes
1 Akzeptierte Lösung
Kevin-C
Lösung
Trendsetter/-in | Partner
Trendsetter/-in | Partner

Body line-height overriding footer line-height (even with Important)

lösung

Hey @SGriffinKatzcy 

 

This is being caused by a lesser known CSS rule similar to inheritance.

 

Kevin-C_0-1614091273258.png

 

Because the SPAN tag is an inline element its line-height cannot be lower than its block level parent, the div.

 

You will see that the parent div has a line-height of 22px, thus you can't go below that size.

 

Hope that makes sense!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

Lösung in ursprünglichem Beitrag anzeigen

1 Antwort
Kevin-C
Lösung
Trendsetter/-in | Partner
Trendsetter/-in | Partner

Body line-height overriding footer line-height (even with Important)

lösung

Hey @SGriffinKatzcy 

 

This is being caused by a lesser known CSS rule similar to inheritance.

 

Kevin-C_0-1614091273258.png

 

Because the SPAN tag is an inline element its line-height cannot be lower than its block level parent, the div.

 

You will see that the parent div has a line-height of 22px, thus you can't go below that size.

 

Hope that makes sense!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev