cssfonts

CSS: How to adjust element's line height to match surrounding text?


I'm developing a website using Pretendard as the default font. This font works well because it has balanced top and bottom padding. However, I need to use a different font for emphasis in certain places. The problem is that this other font has unbalanced height, particularly with excessive bottom padding.

enter image description here

How can I remove or adjust the top and bottom padding of the span.status-stop element to match the height of the surrounding text?


Solution

  • You are looking for text-box property but it's a new feature that you cannot use in production for now.

    .text {
      text-box: text; 
    }
    

    More detail in my blog: https://css-tip.com/text-box/

    enter image description here