滑块行高 CSS

Question

I want to reduce the text size of the top left slider from the linked page .It is set to H2 on default and I can't figure a way to change it. The text size is too big for it and it looks stupid. I tried with the CSS below, but it only reduces the text size, unfortunately the spacing between the lines and words stays like in H2, which doesnt look appropriate either. Please help!

.fusion-flexslider.flexslider-posts .slide-excerpt h2 a {
    color: #fff;
    font-size: 20px !important;
    line-height: 0.5 !important;
}

Answer 1

It's because the <a> derives font-related styling from the <h2>
Try this selector .fusion-flexslider.flexslider-posts .slide-excerpt h2 , it works for me https://prnt.sc/v52pmy

Answer 2

If you set the a element style to include display: inline-block the element will then use the CSS styling you are giving it (though I guess you probably want to set line-height back to normal rather than try 0.5). I have tested this on your site using browser dev tools.

The reason is (to me) a quite complex one - why it doesn't work as you might expect on inline blocks. An explanation is given at https://stackoverflow.com/questions/22816123/why-cant-you-set-line-height-on-an-anchor-element-with-a-background