Friday, June 7, 2024
HomeProgrammingCSS Size Items | CSS-Methods

CSS Size Items | CSS-Methods


You’re going to see so much numbers in CSS. Listed here are just a few examples?

/* Integers */

/* Pixels */

/* em */

/* rem */

/* Share */

/* Characters */

/* Viewport items */

/* Container items */

Whereas these all imply various things, they primarily do the identical factor: outline a component’s dimensions in CSS. We’d like items in CSS as a result of they decide the right way to dimension components on a web page, whether or not it’s the top of a field, the width of a picture, the font-size of a heading, the margin between two components, how lengthy an animation runs, and many others. With out them, the browser would don’t have any manner of understanding the right way to apply numbers to a component.

So, what the heck is px? What’s up with this factor referred to as rem? How are these completely different than different size items? The unit defines what sort of quantity we’re coping with, and every one does one thing completely different, giving us numerous methods to dimension issues in CSS.

Varieties of numbers

You could suppose a quantity is only a quantity, and also you’re not mistaken. Numbers are numbers! However we will distinguish between just a few completely different sorts of numbers, which is useful context for discussing the various kinds of items we connect them to since “quantity” can imply, properly, a quantity of various issues.

  • Integers (actually a unit-less quantity, e.g. 3)
  • Numbers (similar as an integer, solely measured in decimals, e.g. 3.2)
  • Dimensions (both a quantity or integer with a unit, e.g. 3.2rem)
  • Ratios (the quotient between two divided numbers, e.g. 3/2)
  • Percentages (e.g. 3%)

Bought that? They’re all numbers however with nuances that make them ever-so-slightly completely different.

From right here, we will consider numbers in CSS as falling into two particular forms of itemsabsolute and relative. Let’s begin issues off our deep dive on CSS size items by breaking these down.

Absolute items

An absolute unit is like Invoice Murray within the film Groundhog Day: it’s all the time the identical. In different phrases, regardless of the quantity is, that’s precisely the way it computes within the browser no matter how different components are sized.

The most typical absolute worth you’ll see is the pixel worth. It’s kind of laborious to outline, however a pixel is the smallest constructing block of a graphical show, like a pc display screen. And it’s primarily based on the decision of the display screen. So, for those who’re on an excellent high-resolution display screen, a pixel will likely be smaller than it might be on a low-resolution display screen, because the decision can pack extra pixels right into a smaller quantity of area for larger readability. However have a look at the instance beneath. All the bins are sized with pixels, so you will get a way of how giant 50px is in comparison with 250px.

Absolute values are good in that they’re predictable. That would, nonetheless, change in some conditions, significantly on the subject of zooming. If, say, a consumer zooms right into a web page utilizing browser settings, then something outlined with an absolute worth goes to extend its absolute dimension accordingly. So, if the font-size of a paragraph is about to 20px, the paragraph goes to be bigger because the consumer zooms nearer into the web page. And since zooming is commonly used to make content material extra readable, utilizing absolute values that retain their sizing might be a very good strategy for making pages extra accessible by permitting customers to zoom issues as much as a spot that extra comfy to learn.

However then once more, see Josh Collinsworth’s click-baity, however incredible, publish titled “Why it’s best to by no means use px to set font-size in CSS” for an exhaustive rationalization of how pixels behave when used to set the font-size of a component. It’s an awesome learn to higher perceive the habits and limitations of pixel items.

And, hey: pixels are solely considered one of many forms of absolute lengths which are accessible in CSS. Actually, we will group them by the forms of issues they measure:

Size items

Size items are somewhat humorous as a result of they will technically be both an absolute unit or a relative unit. However we’re discussing them in absolute phrases for the time being and can revisit them after we get additional alongside to relative size items.

A size is basically a dimension, which is any integer proceeded by a unit, in line with the listing of forms of numbers we checked out earlier. And after we speak about dimensions, we’re actually speaking in regards to the bodily dimension of a component.

Unit Title
cm Centimeters
mm Millimeters
Q Quarter-millimeters
in Inches
laptop Picas
pt Factors
px Pixels

What we’re listed below are the forms of items you may use see on a tape measure (e.g., cm and in) or in print design (e.g. laptop and pt). They’re what they’re and what you see is what you get.

Angle items

Angle items are purely geometric. They’re good for setting form dimensions — like a circle’s radius, setting the course of a linear-gradient(), or setting the how a lot we need to rotate() one thing.

Unit Title Description Instance
deg Levels A full circle is the same as 360deg. rotate(180deg)
grad Gradiens A full circle is the same as 400grad. rotate(200grad)
rad Radiens A full circle is the same as (i.e., 2 × 3.14), or about 6.2832rad. rotate(3.14rad)
flip Turns A full circle is 1turn, like a bicycle wheel making one full rotation. rotate(.5turn)
Time items

Time items are what you’d look forward to finding on a clock or watch, however solely measure in seconds and milliseconds. Apparently the net can’t be measured in minutes, hours, days, weeks, months, or years. Maybe we’ll get a brand new class of “calendar items” sooner or later, or perhaps there’s no good use case for that kind of factor. 🤷‍♂️

Unit Title Description Instance
s Seconds One full minute of time is the same as 60s. animation-duration: 2s
ms Milliseconds One full second of time os equal to 1000ms. animation-duration: 2000ms
Frequency items

You received’t see frequency items used fairly often and for good cause: they’re not supported by any browser on the time of this writing. However they’re specced to vary sound frequency, comparable to a sound’s pitch. The most effective I could make of it because it presently stands is that frequencies can be utilized to govern an audio file with a better or decrease pitch measured in hertz and kilohertz.

Unit Title Description Instance
Hz Hertz Measures the variety of frequencies per second <supply src="" sort="audio/mpeg" frequency="100Hz">
kHz Kilohertz A worth of 1Hz is the same as 0.001kHz. <supply src="" sort="audio/mpeg" frequency="0.1kHz">

For those who’re questioning what constitutes a “low” pitch from a “excessive” one, the spec explains it like this:

[W]hen representing sound pitches, 200Hz (or 200hz) is a bass sound, and 6kHz (or 6khz) is a treble sound.

Decision items

Decision is what number of little dots are packed right into a display screen — such because the display screen you’re proper now — the place extra dots per inch of area improves the readability and high quality of the show. The less dots there are, the extra pixelated and blurry the show.

Why would you want one thing like this? Nicely, it’s nice for concentrating on types to particular screens that assist sure resolutions in a media question.

img {
  max-width: 500px;

/* Double the decision and above */
@media (min-resolution >= 2dppx) {
  img {
    max-width: 100%;
Unit Title Description Instance
dpi Dots per inch The variety of dots packed into one inch of area. @media
(min-resolution: 96dpi) {}
dpcm Dots per centimeter The variety of dots packed into one centimeter of area. @media
(min-resolution: 960dpcm) {}
dppx (or x) Dots per pixel The variety of dots packed into one pixel of area. @media
(min-resolution: 1dppx) {}

Curiously, the specification makes point out of an infinite worth that’s supported by decision media queries for concentrating on screens with out decision constraints. It’s not a lot of a “catch-all” worth for concentrating on any kind of display screen, however for instances after we’re utilizing the media question vary syntax to judge whether or not a sure worth is bigger than, lower than, or equal to it:

For output mediums that don’t have any bodily constraints on decision (comparable to outputting to vector graphics), this function should match the infinite worth. For the aim of evaluating this media function within the vary contextinfinite have to be handled as bigger than any potential <decision>. (That’s, a question like (decision > 1000dpi)will likely be true for an infinite media.)

W3C Media Queries Stage 4 specification

Relative items

relative unit is extraordinarily well-named as a result of no matter worth we use for a relative unit is determined by the dimensions of one thing else. Say we’ve got an HTML aspect, a <div>, and we give it an absolute top worth (not a relative one) of 200px.

<div class="field">
  I'm 200 pixels tall
.field {
  top: 200px;

That top won’t ever change. The .field aspect will likely be 200px tall it doesn’t matter what. However let’s say we give the aspect a relative width (not an absolute one) of 50%.

<div class="field">
  I'm 200 pixels tall and 50% extensive
.field {
  top: 200px;
  width: 50%;

What occurs to our field? It takes up 50%, or half, of the accessible area on the display screen.

See that? Go forward and open that demo in a brand new window and alter the width of the display screen. And spot, too, how the peak by no means modifications as a result of it’s an absolute size unit in pixels. The width, in the meantime, is fluidly resized as “50% of the accessible area” modifications with the width of the display screen.

That’s what we imply when speaking about computed values with relative numbers. A relative quantity acts kind of like a multiplier that calculates the worth used to set a size primarily based on what sort of unit it’s relative to. So, a worth of 3rem goes to wind up turning into a distinct worth when it’s computed.

Percentages, like 50%, are just one sort of relative unit. Now we have many, many others. As soon as once more, it’s useful to interrupt issues out into separate teams to grasp the variations simply as we did earlier with absolute items.


We’ve already mentioned percentages in fairly good element. What makes a proportion relative is that it computes to a quantity worth primarily based on the size of one other aspect. So, a component that’s given width: 25% in a container that’s set to width: 1000px computes to width: 250px.

Unit Title Relative to…
% % The scale of the aspect’s father or mother container.
Font relative items

The em and rem items we checked out earlier are prime examples of relative items that you will notice all over. They’re extremely helpful, as we noticed, as a result of altering the font-size worth of a component’s father or mother or the <html> aspect, respectively, causes the aspect’s personal font-size worth to replace in accordance with the up to date worth.

In different phrases, we don’t have to immediately change a component’s font-size when updating the font-size of different components — it’s relative and scales with the change.

Unit Title Relative to…
em Aspect The font-size worth of the aspect’s father or mother container.
rem Root aspect The font-size worth of the <html> aspect.
ch Character The width of 1 character of content material relative to the father or mother aspect’s font. The computed width might replace when changing one font with one other, aside from monospace fonts which are persistently sized.
rch Root character The identical factor as a ch unit besides it’s relative to the font of the foundation aspect, i.e. <html>.
lh Line top The line-height worth of the aspect’s father or mother container.
rlh Root aspect line top The line-height worth of the <html> aspect.
cap Capital letter The peak of a capital letter for a specific font relative to the father or mother aspect.
rcap Root capital letter The identical measure as cap however relative to the foundation aspect, i.e. <html>.
ic Worldwide character The width of a CJK character, or international glyph, e.g. from a Chinese language font, relative to a component’s father or mother container.
ric Root worldwide character The identical measure as ic however relative to the foundation aspect, i.e. <html>.
ex X-height The peak of the letter x of a specific font, or an equal for fonts that don’t comprise an x character, relative to the father or mother aspect.
rex Root x-height The identical measure as ex however relative to the foundation aspect, i.e. <html>.

A few of these phrases will make extra sense to typography nerds than others. The next diagram highlights the traces that correspond to relative font items.

Four lines drawn over a line of text illustrating the ascender height, x-height, baseline, and descender height.

So, on the expense of beating this idea into the bottom, if width: 10ch computes to a sure variety of pixels when utilizing one font, it’s doubtless that the computed worth will change if the font is swapped out with one other one with both bigger or smaller characters.

Viewport relative items
Unit Title Relative to…
vh / vw Viewport Top / Viewport Width The peak and width of the viewport (i.e., seen a part of the display screen), respectively.
vmin / vmax Viewport Minimal / Viewport Most The lesser and larger of vh and vw, respectively.
lvh / lvw Giant Viewport Top / Giant Viewport Width The peak and width of the viewport when the machine’s digital keyboard or browser UI is out of view, leaving a bigger quantity of accessible area.
lvb / lvi Giant Viewport Block / Giant Viewport Inline These are the logical equivalents of lvh and lvw, indicating the block and inline instructions.
svh / svw Small Viewport Top / Small Viewport Width The peak and width of the viewport when the machine’s digital keyboard or browser UI is in view, making the quantity of accessible area smaller.
svb / svi Small Viewport Block / Small Viewport Inline These are the logical equivalents of svh and svw, indicating the block and inline instructions.
dvh / dvw Dynamic Viewport Top / Dynamic Viewport Width The peak and width of the viewport accounting for the accessible area altering if, say, the machine’s digital keyboard or browser UI is in view.
dvb / dvi Dynamic Viewport Block / Dynamic Viewport Inline These are the logical equivalents of dvh and dvw, indicating the block and inline instructions.
dvmin / dvmax Dynamic Viewport Minimal / Dynamic Viewport Most The lesser and larger of dvh/dvb and dvw/dvi, respectively.

Ah, viewport items! After we say that one thing must be 100% extensive, meaning it takes up the total width of the comprise it’s in. That’s as a result of a proportion unit is all the time relative to its nearest father or mother aspect. However a  viewport unit is all the time relative to the dimensions of the viewport, or browser window. If a component has a viewport top of 100vh and a viewport width of 100vw, then it is going to be as tall and extensive as the total browser window.

This generally is a neat technique to create one thing like a hero banner on the high of your web site. For instance, we will make a banner that’s all the time one half (50vh) the peak of the viewport making it distinguished irrespective of how tall somebody’s browser is. Change the CSS within the top-left nook of the next demo from top: 50vh to one thing else, like 75vh to see how the banner’s top responds.

There’s one thing else that’s essential to know when working with viewport items. You understand how cell phones, like iPhone or an Android machine, have digital keyboards the place you sort immediately on the display screen? That keyboard modifications the dimensions of the viewport. That implies that every time the keyboard opens, 100vh is now not the total top of the display screen however no matter area is leftover whereas the keyboard is open, and the format may get tremendous squished consequently.

That’s why we’ve got the svh, lvh, and dvh items along with vh:

  • svh is the same as the “small” viewport top, which happens when the keyboard is open.
  • lvh is the same as the “giant” viewport top, which is when the keyboard is disabled and out of view.
  • dvh is a cheerful medium between svh and lvh in that it’s “dynamic” and updates its worth accordingly when the keyboard is displayed or not.
  • dvmin / dvmax is the larger ore lesser of dvh, respectively.

It’s a little bit of a tightrope stroll in some instances and a very good cause why container queries and their items (which we’ll get to subsequent) are gaining popularity. Take a look at Ahmed Shader’s article “New Viewport Items” for a complete rationalization about viewport items with detailed examples of the problems it’s possible you’ll run into. You may additionally be fascinated by Sime Vidas’s “New CSS Viewport Items Do Not Clear up The Traditional Scrollbar Downside” for a greater understanding of how viewport items compute values.

Container relative items
Unit Title Equal to…
cqw Container question width 1% of the queried container’s width
cqh Container question top 1% of the queried container’s top
cqi Container question inline dimension 1% of the queried container’s inline dimension, which is its width in a horizontal writing mode.
cqb Container question block dimension 1% of the queried container’s inline dimension, which is its top in a horizontal writing mode.
cqmin Container question minimal dimension The worth of cqi or cqb, whichever is smaller.
cqmax Container question most dimension The worth of cqi or cqb, whichever is bigger.

Container items are designed for use with container queries. Simply as we’re in a position to goal a selected display screen dimension with a media question, we will goal the precise dimension of a specific aspect and apply types utilizing a container question.

We received’t do an enormous ol’ deep dive into container queries right here. The related bit is that we’ve got CSS size items which are relative to a container’s dimension. For instance, if we had been to outline a container:

.parent-container {
  container-type: inline-size;

…then we’re watching that aspect’s inline-size — which is equal to width in a horizontal writing mode — and might apply types to different components when it reaches sure sizes.

.child-element {
  background: rebeccapurple;
  width: 100%;

  @container father or mother (width > 30ch) {
    .child-element {
      background: dodgeblue;
      width: 50cqi;

Strive resizing the next demo. When the father or mother container is bigger than 30ch, the kid aspect will change backgrounds and shrink to one-half the father or mother container’s width, or 50cqi.

What about unit-less numbers?

Oh yeah, there are occasions if you’re going to see numbers in CSS that don’t have any unit in any respect — only a single integer or quantity with out something appended to it.

aspect-ratio: 2 / 1; /* Ratio */
column-count: 3; /* Specifies quite a lot of columns */
flex-grow: 1; /* Permits the aspect to stretch in a flex format */
grid-column-start: 4; /* Locations the aspect on a selected grid line */
order: 2; /* Units the order of elemnents in a flex or grid format */
scale: 2; /* The elementis scaled up or down by an element */
z-index: 100; /* Aspect is positioned in a numbered layer for stacking */
zoom: 0.2;  /* The aspect zooms in or out by an element */

This isn’t a complete listing of all of the CSS properties that settle for unit-less numeric values, however it’s a stable image of if you would use them. You’ll see that usually a unit-less quantity is an specific element, comparable to a selected column to place a component, a selected layer in a stacking context, a boolean that allows or disables a function, or the order of components. However be aware that anytime we declare “zero” as a quantity, we will write it with or with out a prepended unit, as zero all the time evaluates to zero it doesn’t matter what unit we’re coping with.

border: 0; /* No border */
box-shadow: 0 0 5px #333; /* No shadow offset */
margin: 0; /* No margin */
padding: 0; /* No padding */

We will create our personal customized items!

In some instances, we might need to work with a numeric worth, however CSS doesn’t precisely acknowledge it as one. In these instances, the quantity is acknowledged as a “string” worth as an alternative, no matter whether or not or not it comprises alphabetical characters. That’s the place we will use @property to create what’s referred to as a “customized property” that evaluates a numeric worth in a sure manner.

Right here’s a very good instance. There was a time when it was nearly unimaginable to animate a gradient that modifications colours over time as a result of to take action would require (1) a coloration perform that enables us to vary a coloration worth’s hue (which we’ve got with hsl()) and (2) having the ability to interpolate that hue worth across the coloration spectrum, between a variety of 0deg and 360deg.

Sounds easy sufficient, proper? Outline a variable that begins at 0 after which cycles via 360 levels on the finish of an animation. However this doesn’t work:

/* 👎 */
.aspect {
  --hue: 0;
  animation: rainbow 10s linear infinite;
  background: linear-gradient(hsl(--hue 50% 50%);

@keyframes rainbow {
  from { --huw: 0; }
  to { --hue: 360deg; }

That’s as a result of CSS reads the variable as a string as an alternative of a quantity. Now we have to register that variable as a customized property in order that CSS aptly reads it as a numeric worth.

@property --hue {
  syntax: "<quantity>";
  initial-value: 0;
  inherits: true;

There we go! Now that we’ve given CSS a touch that the --hue syntax is that of a <quantity>, we will animate away!

/* 👍 */
@property --hue {
  syntax: "<quantity>";
  initial-value: 0;
  inherits: true;

.aspect {
  --hue: 0;
  animation: rainbow 10s linear infinite;
  background: linear-gradient(hsl(--hue 50% 50%);

@keyframes rainbow {
  from { --huw: 0; }
  to { --hue: 360deg; }

Discover a deeper rationalization of this similar instance in “Interpolating Numeric CSS Variables” by Geoff Graham.

When to make use of one unit over one other

That is tremendous tough as a result of CSS is extraordinarily versatile and there are not any definitive or hard-and-fast guidelines for when to make use of a selected sort of CSS size unit over one other. In some instances, you completely have to make use of a selected unit as a result of that’s how a sure CSS function is specced, like utilizing angle items to set the course of a linear gradient:

.aspect {
  background: linear-gradient(
    135deg, purple, blue;

The identical goes for the values we use in sure coloration capabilities, like utilizing percentages to set the saturation and lightness ranges within the hsl() perform:

.aspect {
  background: hsl(0 100% 10%);

Talking of coloration capabilities, we outline alpha transparency with both an integer or quantity:

.aspect {
  background: hsl(0 100% 10% / 0.5); /* or just .5 */

All that being mentioned, many instances are going to be some extent of “it relies upon” however there are some cases the place it is smart to make use of a selected unit in your work.

Usually set font sizes in rem and em items

This manner, you may set issues up in a manner the place altering the font-size worth of the <html> or a father or mother aspect updates the font sizes of their descendants.

html {
  font-size: 18px; /* Inherited by all different components */

.father or mother {
  font-size: 1rem; /* Updates when the `html` dimension modifications */

.youngster {
  font-size: 1em; /* Updates when the father or mother dimension modifications */

Declare “zero” with out items for those who’d like

It’s not an enormous deal or something, however leaving off the items shortens the code a smidge, and anytime we’re in a position to write shorter code it’s a chance for sooner web page efficiency. The impression could also be negligible, however we’re in a position to do it since 0 all the time computes to 0, it doesn’t matter what unit we’re working with.

Use container items for responsive design, the place potential

Container queries generally are so gosh-darn nice for responsive layouts as a result of they have a look at the dimensions of the container and allow us to apply types to its descendants when the container is a sure dimension.

.father or mother {
  container: my-container / inline-size; /* Seems to be at width */

.youngster {
  show: flex;
  flex-direction: column;
  max-width: 100vh; /* 100% of the viewport */

/* When the container is bigger than 600px extensive */
@container my-container (width >= 600px) {
  .youngster {
    flex-direction: row;
    max-width: 50%; /* 50% of the father or mother elenent */

So, if we going to dimension the .youngster aspect — or any of its youngsters — it’s price specifying sizes in relation to the container’s dimension with container items than, say, the viewport’s dimension with viewport items.

.father or mother {
  container: my-container / inline-size; /* Seems to be at width */

.youngster {
  show: flex;
  flex-direction: column;
  max-width: 100cqi; /* 100% of the container */

/* When the container is bigger than 600px extensive */
@container my-container (width >= 600px) {
  .youngster {
    flex-direction: row;
    max-width: 50cqi; /* 50% of the container */

Use percentages if you’re uncertain of the context

Sure, use container items for responsive design, however that solely does you good if you realize you’re within the context of a container. It’s potential, although, that you simply use the identical part somewhere else, and a type of locations may not be a registered container.

In that case, go together with a proportion worth as a result of percentages are relative to no matter father or mother aspect you’re in, no matter whether or not or not it’s a container. This manner, you may declare a component’s dimension as 100% to take up the total area of no matter father or mother aspect comprises it.

The one phrase of warning is to notice that we’re solely basing the dimensions on the father or mother. In the meantime, container items can fashion any descendant within the container, irrespective of the place it’s positioned.

Viewport items are nice for laying out containers

You could be considering that viewport items are a foul factor since we’ve been advising towards them in so many instances, like font sizing, however they’re nonetheless extremely helpful, significantly on the subject of establishing a full-page format.

I say “full-page” format as a result of container queries are the gold commonplace for sizing components in line with the area they’ve of their container. But when we’re working with a full web page of containers, that is the place viewport items can be utilized to determine a responsive format at a better degree.

If the weather of particular person containers have a look at their container for sizing data, then the sizing and placement of particular person containers themselves most likely ought to have a look at the viewport because it immediately influences the quantity of area on the web page.


Aspect (em) and Relative aspect (rem) items

Let’s speak particularly about these two little buggers. We noticed how a proportion unit calculates its dimension by the dimensions of one thing else. em and rem items are kind of the identical, however they’re calculated primarily based on the relative font dimension of particular components.

Let’s begin with em items and say we’ve got an HTML aspect, a <div> with a .field class, and we set its font dimension to 20px. Which means any textual content inside that aspect is 20px.

Nice, now what if we resolve we want further textual content within the field, and provides it a relative font dimension of 1.5em?

See how a font dimension of 1.5em is bigger than the 20px textual content? That’s as a result of the bigger textual content relies on the field’s font dimension. Behind the scenes, that is what the browser is calculating:

20px * 1.5 = 30px

So, the relative font dimension is multiplied by the pixel font dimension, which winds up being 30px.

And guess what? rem items do the very same factor. However as an alternative of multiplying itself by the pixel font dimension of the father or mother container, it appears to be like on the pixel font dimension of the particular <html> aspect. By default, that’s 16px.

/* That is the browser's default font dimension */
html {
  font-size: 16px;

.field {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */

And if we alter the HTML aspect’s font dimension to one thing else?

html {
  font-size: 18px;

.field {
  font-size: 1.5rem; /* 18px * 1.5 = 27px */
Character unit (ch)

The character unit (ch) is one other is one other unit relative to font dimension and, whereas it isn’t used all that always, it’s amazingly nice at sizing issues primarily based on the quantity of content material displayed in a component, as a result of one character unit equals the width of 1 character of content material. Right here’s how I wrap my very own head round it. If we’ve got this in our HTML:

<p>The large brown canine lazily jumped over the fence.</p>

…and this CSS:

p {
  width: 10ch;

What we get is a paragraph that’s 10 characters extensive. Which means the textual content will break after the tenth character, together with areas.

However be aware that the phrases themselves don’t break. If the content material is meant to interrupt after 10 characters, the browser will begin the following line after an entire phrase as an alternative of breaking the phrase into a number of traces, holding every little thing straightforward to learn.

For those who’re questioning if you may attain for the ch unit, it’s completely boss at establishing line lengths which are extra nice and legible, particularly for lengthy type content material like this information you’re studying.

Line top unit (lh)

The line-height unit (lh) appears to be like on the line-height property worth of the aspect’s containing (i.e., father or mother) aspect and makes use of that worth to dimension issues up.

.father or mother {
  line-height: 1.5;

.youngster {
  top: 3lh; /* 3 * 1.5 = 4.5 */

When would you employ this? Personally, I discover lh helpful for setting an actual top on one thing primarily based on the variety of traces wanted for the textual content. You possibly can see this clearly demonstrated in Temani Afif’s “CSS Ribbon” impact that makes use of lh to determine dimensions for every row of textual content that makes for consistently-sized traces that adapt to regardless of the father or mother aspect’s font-size worth occurs to be,

Absolute vs. Relative Items
Container Items
Viewport Items
Angle Items
Time Items
Decision Items


Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments