RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconShows IconOpen Source Software IconSpeaking IconTools IconShuffle IconNext IconPrevious IconCalendar IconCalendar Edit IconNotebook IconObservable Notebooks IconSlash IconGoogle G Icon
Code snippet titled, inline padding like half leading
A cartoon skull with a hotpink hat on.2 min read

Another rad use for the line-height unit

css

CSS has a unit that represents the current line-height of it's context. How rad is that. I've been having fun finding use cases for this… lh.

peep it #

the concept #

Any line-height value above unitless 1 will get distributed to the line box as "half leading". Think of it like equal block spacing distribution. Well now we have lh for use in calc() and to perhaps distribute equal inline spacing.

That led me to this rad use case for a tiny tag component thingy.

.tag {
  padding-inline: .25lh;
}

Which .25lh was because the element already had line-height set to 1.5.

Might as well turn it into a calc() because it matches the intent and makes the computer do the math, plus add the line-height to the demo so it's all there at a glance:

.tag {
  line-height: 1.5;
  padding-inline: calc(.5lh / 2);
}

And here's the developer's cut:

.tag {
  /* .5 extra leading */
  line-height: 1.5;
  
  /* we can divvy equal spacing to the inline edges */
  /* complimenting extra height half leading */
  /* making even spacing all around */
  padding-inline: calc(.5lh / 2);
}

outro #

This isn't that cool, but also like, I thought it was cool.

22 comments #

199likes
16reposts
  • chanmako
  • ユイト🍊
  • Meowlivia_
  • Abdulrasaq Mustapha (Geekmaros)
  • 이재호
  • Евгений Резниченко
  • Hon Q. Tran
  • Mohammed🇬🇭
  • Stefan Matei
  • subu hunter
  • yossoon
  • 𝙅𝙖𝙨𝙤𝙣 𝘾𝙡𝙚𝙢𝙚𝙣𝙨
  • Christa Dickson
  • fg
  • PawaOx4th
  • Robert Vera

Join the conversation on

Also very useful when you want an SVG Icon align with a consistent block-size!
Roman CzerkiesRoman Czerkies
With this one, you could actually use em (.5lh from 1.5 is .75em), but I got your point. What do you think about `calc((1lh - 1em) / 2)` and now you don't need to remember to change it, if line-height changes :)
Piotr ChrobakPiotr Chrobak
Whoaa I did NOT know you could do that 🫡 Thank you Adam!
Akshaya VenkyAkshaya Venky

@andy Has you brokened it?

Matt WilcoxMatt Wilcox
Would padding: .25lh; work or does it have to go inside a calc function?
dave cOllisondave cOllison

@mattwilcox @andy borked for me in chrome too. safari is fine tho.

Antonio SarcevicAntonio Sarcevic

@sarcevic @mattwilcox works fine for me!

Andy BellAndy Bell

@andy damn. Shame I can't read it on my device 😞 is the author on masto?

Leigh GarlandLeigh Garland
Who that's a very nice little trick 🙃
Roland FrankeRoland Franke

@andy as a designer, this bugs me. Leading is vertical rhythm, i much prefer to use something that caters to horizontal spacing like ch when setting inline padding.

Mike-麥-Mai.html 😎Mike-麥-Mai.html 😎
I want the lh support but in case of horizontal spacing, I would not relate it to leading which sets vertical rhythm, I would use ch instead.
Mike-麥-Mai/index.htmlMike-麥-Mai/index.html
Is the lh unit not the current computed line height? So in this example you're distributing .75/2 to each side instead of .25 This is how I would think it would work (codepen) codepen.io/robgordon/pen/…
Tone RowTone Row
It’s a cool technique! Didn’t know about the lh unit 🤘
Tone RowTone Row
I find these “semantical units” a much better choice because they are not relative units you relate or calculate directly, but typographic elements that you use semantically like half a line-height of padding It’s the reading experience you see/say
Justgu.usJustgu.us
Is the Chrome already supporting the line-height unit?
2U2U
For other browsers: .tag { --lh: 1.5em; line-height: var(--lh); padding-inline: calc(var(--lh) / 4); } I hope cap is next. I wanted to ask you to star the bug, but you’re the one who opened it hehe bugs.chromium.org/p/chromium/iss…
ŠimeŠime