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

SOLVE
SGriffinKatzcy
Participant

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 Accepted solution

Accepted Solutions
Kevin-C
Solution
Key Advisor | Partner

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!

View solution in original post

1 Reply 1
Kevin-C
Solution
Key Advisor | Partner

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!

View solution in original post