htmlcsstypographyline-height

Make DIV as wide as the current line-height?

Let's say I have a <div> element, and I want to make its width equal the current line-height. Is there a CSS unit or some fancy calc() function that will accomplish this? I know a workaround is to simply hard-code the actual line-height into a calc() function, but I want to know if there is a way that will work with all line-heights.

What I have so far, but I don't like using a hard-coded line-height value (1.33 in this example):

.test {
width: calc(1em * 1.33);
height: auto;
background-color: red;
}

<div class="test"></div>
Solution

  • There is finally support for the lh unit in all major browsers.

    Source: https://developer.mozilla.org/en-US/docs/Web/CSS/length#lh

    To set the height of a <div> to its current line height, use width: 1lh.