Logical properties in CSS

Block and inline instead of top and left, so a layout survives being translated.

.card {
  margin-block: 1.5rem 2rem;
  margin-inline: auto;
  padding-block-start: 1rem;
  padding-inline: 1.25rem;
  border-inline-start: 3px solid #2b6cb0;
  max-inline-size: 42rem;
  block-size: auto;
}

.pull-quote {
  float: inline-start;
  margin-inline-end: 1rem;
  text-align: start;
}

How it works

1. inline runs along the text; block runs down the page.
2. In a right-to-left language margin-inline-start flips and margin-left does not.
3. The shorthands take one or two values, like their physical cousins.

Keywords and builtins used here

• card
• float
• px
• rem

The run, in numbers

Lines

15

Characters to type

273

Tokens

60

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 48 seconds.

Type this snippet

Step 3 of 3 in Values & units, step 22 of 26 in Selectors & the box model.

← Previous Next →