Today I Learned - Rocky Kev

TIL character-spacing CSS

POSTED ON:

TAGS: css

There's 3 types of spacing:

UNSTYLED:

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

Letter Spacing

letter-spacing: -1px

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

Word Spacing

word-spacing: 5px

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

Line height

line-height: 1.2

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

Using Tailwind utility classes

https://tailwindcss.com/docs/letter-spacing
https://tailwindcss.com/docs/line-height

Tailwind doesn't have word spacing utilities.

via https://www.quirksmode.org/css/text/spacing.html
Dev docs: https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')