CODEWITHSUNDEEP
htmlcsstypographyline-height
user3163495
user3163495

Reputation: 3518

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>

Upvotes: 0

Views: 204

Answers (1)

user3163495
user3163495

Reputation: 3518

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.

Upvotes: 1

Related Questions