RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia IconGit IconSpeaking IconTools Icon
Code snippet titled, inline padding like half leading
A series of images of an avatar doing a bunch of skateboard tricks.

Another rad use for the line-height unit

3 min read
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.

Mentions #

Join the conversation on

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

@andy Has you brokened it?

Matt WilcoxMatt Wilcox

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

Leigh GarlandLeigh Garland

@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 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 😎

Crawl the CSS Webring?

previous sitenext site
a random site