Michelle Barker with my favourite sorta weblog put up: quick, sensible, and leaves you with a beneficial nugget in your time. Right here, she will get into logical property shorthands in CSS, significantly those who set lengths simply on a single axis, say solely the block (vertical) axis or simply the inline (horizontal) axis.
I say “block” and ”inline” as a result of, so far as logical properties are involved, the x-axis may simply as nicely behave like a vertical axis relying on the present writing-mode.
So, the place we’ve all the time had padding, margin, and border shorthands that may help a multi-value syntax, none of them permit us to declare lengths on a particular axis with out additionally setting a size on the opposite axis.
For instance:
/* This offers us margin on the inline axis */
margin: 0 3rem;…however we needed to set the opposite axis with a view to get there. With logical properties, nonetheless, we now have further shorthands for every axis that means we will cue up the margin-inline shorthand to work particularly on the inline axis:
margin-inline: 3rem;Michelle mentions my favourite logical property shorthand in passing. What number of occasions do you place one thing to this kind of tune:
.position-me {
place: absolute;
high: 0;
proper: 0;
backside: 0;
left: 0;
}We will get these 4 strains into in with inset: 0. Or we may goal the block and inline axis straight with inset-block and inset-inline, respectively.
Whereas we’re speaking shorthands, I all the time prefer to put a phrase of warning about ”unintentional” CSS resets. Simply one of many widespread CSS errors I make.
