Home/ Questions/Q 8092615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T20:19:24+00:00

Issue for text elements that are adjacent to icon elements, the glyph height is

  • 0

Issue

for text elements that are adjacent to icon elements, the glyph height is not aligned with the icon height. the text elements are styled by CSS with font-size: 20px; and have consistent width for all their instances.

here’s an illustration:

font problem

for the above case, the text should have the same height as the icon.

Motivation

finding a way to make the letters a bit taller to take up the available vertical space, while keeping the font-size as is. how to do that?

What have I tried?

to increase the font-size a bit, but came to conclusion i’ll have to compromise for a smaller icon if I can’t increase the letter height, thus the issue.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can do it with css3 property Scale: (demo on dabblet.com)
    enter image description here

    HTML markup:

    <span class="lower">lower size</span>
<span>normal size</span>
<span class="taller">taller size</span>

    CSS:

    span {
    font-size: 20px;
    display: inline-block;
}

span.lower{ transform: scaleY(0.9); }
span.taller { transform: scaleY(1.1); }

    Also, you can try to set various values of vertical-align for images in your case:
    sub, super, bottom, top, middle. This may help to solve your problem from another point.

    • 0