The CSS lh unit

Introduction

The road peak unit (lh) has been round for some time and I not often see folks sharing how they use it. On this article, I’ll share a couple of use instances that I personally like.

From its title, the road peak unit is the same as the computed worth of the line-height property.

Vertical spacing

Let’s take the next instance. I need to add vertical spacing between the paragraphs. Often, we use margin with a set worth, or, in the very best case, a mixture of a set worth and container or viewport models.

For demo functions, I added a spacer manually between the paragraphs. It’s highlighted in pink. Its default peak is 1rem.

I switched the worth to lh. Discover how the spacing between the paragraphs seems to be extra logical.

p {
  margin-bottom: 1lh;
}

The spacing is now primarily based on the road peak of the textual content. This utilization was once carried out with hacks the place we needed to manually set the peak of a bit of textual content, then use it for the spacing.

Whereas it’d work in some instances, it will likely be difficult to keep up and scale.

Paper line impact

This can be a standard utilization for line peak and lh makes it even simpler. I made the strains utilizing a CSS linear gradient. The peak of the repeating sample is about to 1lh.

Right here is the background picture:

.content material {
  background-image: linear-gradient(
    to backside,
    clear calc(100% - 1px),
    rgba(0, 0, 0, 0.15)
  );
  background-size: 100% 2rem;
}

Whereas that works as a begin, it’s not an optimum resolution. Attempt to change the font sizes under and see the way it breaks the alignment with the paper strains.

In case you toggle the utilization of lh for the cardboard, you will note how the alignment is healthier when the font dimension is modified.

I did that by setting the font dimension on the father or mother, and the paragraphs inherit it.

.content material {
  font-size: 1.5rem;
  background-image: linear-gradient(
    to backside,
    clear calc(100% - 1px),
    rgba(0, 0, 0, 0.15)
  );
  background-size: 100% 1lh;

  p {
    font-size: inherit;
  }
}

You may as well manually set a unitless line-height on the father or mother itself and the kid parts will inherit it by default.

Floating photographs alignment

When was the final time you used CSS float? Here’s a enjoyable utilization of the road peak unit. I want the picture’s peak to be aligned with the road subsequent to it.

Take the next picture. Discover how the underside fringe of the picture isn’t aligned with the strains.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint, iure magnam quis, quia, necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint, iure magnam quis, quia, necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint, iure magnam quis, quia, necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis?

If we toggle the utilization of lh for the picture’s peak together with the spherical() perform, it would work.

.content material img {
  float: left;
  peak: calc-size(auto, spherical(up, dimension, 1lh));
}

Here’s what’s occurring with the above CSS snippet:

• Utilizing calc-size() to get the picture’s peak by way of auto.
• Utilizing the spherical() perform together with the dimension from calc-size() and the lh to around the picture’s peak to the closest line.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint, iure magnam quis, quia, necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint, iure magnam quis, quia, necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint, iure magnam quis, quia, necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis?

On this case, altering the font dimension is not going to break the alignment, as a result of the road peak is inherited. Attempt it!

You may study extra about spherical() from this latest article.

Pale content material

Within the instance under, I’ve a listing of things, and I need to restrict its peak to 5 strains. With out utilizing the lh unit, that is onerous to handle.

Attempt rising the font dimension and see what occurs.

The peak restrict not matches the primary 5 strains. It is because the fading and the max-height are primarily based on pixels.

.record {
  max-height: 120px;
  mask-image: linear-gradient(
    to backside,
    #000,
    #000 calc(100% - 30px),
    clear 100%
  );
  overflow-y: clip;
}

Within the demo under, see how the peak will increase to match the 5 strains when utilizing the lh unit.

.record {
  max-height: 5lh;
  mask-image: linear-gradient(
    to backside,
    #000,
    #000 calc(100% - 1lh),
    clear 100%
  );
}

Right here is the demo:

Measurement an icon primarily based on the road peak

I realized about this utilization from Andy Bell. The thought is to make use of the lh unit to set the scale of the icon.

.button {
  --size: 0.8lh;

  svg {
    width: var(--size);
    peak: var(--size);
  }
}

Take a look at the demo:

There are various extra demos that may profit from the lh unit! In case you have every other use instances, please share them with me, I’d love to have a look!

Additional studying

Study extra about CSS layouts

Constructing layouts could be a difficult job, specifically when you don’t know the core psychological mannequin of CSS layouts. You don’t have to fret about that anymore. I launched an interactive CSS structure course, and I known as it, The Structure Maestro.

Checkout The Structure Maestro course and stage up your CSS structure abilities.