CSS offers root and relative values.
- Root values, such as
rem
andrlh
, are linked to the values in the:root
selector, typically thehtml
element. - Relative values, like
em
,lh
,ch
, and others, are connected to thefont-size
of the specific element.
I’ve realized there might be a need for a unit between root and relative values, to size elements without complex calculations.
Example: Prose
Jen Simmons discussed using the lh
unit for margin
and padding
to enhance typographical vertical rhythm.
p { margin-block: 1lh; }
This concept can be expanded to include other spaces around text. The “Lobotomized Owl” technique by Heydon Pickering is one approach.
* + * {
margin-top: 1lh;
}
The :not(:first-child)
can also achieve the same effect, potentially more readably.
*:not(:first-child) {
margin-top: 1lh;
}
Selectors often need constraining to prevent them from affecting the entire page. The .prose
class is useful for this.
.prose {
*:not(:first-child) {
margin-top: 1lh;
}
}
This works well, but issues arise when different typography sizes are included, as 1lh
for an
can be large.
Using Flexbox on the parent element can circumvent this issue by setting gap
to 1lh
, avoiding changes in 1lh
for h2
and margin collapse.
Discover more from WIREDGORILLA
Subscribe to get the latest posts sent to your email.