TILs, snippets—my digital code garden 🌱.

All notes 11ty a11y ai animation api backend cheatsheet cli computer-science cpp css cypress deno dev devops git golang graphql html interview javascript messaging networking node performance php python questions react rust services sql storybook svelte sveltekit testing typescript typography vscode

CSS logical properties and values

css

If you’re creating a website in multiple languages, logical properties and values are incredibly useful. Even if you’re not, there are still some convenient new shorthands it’s worth knowing about.

Physical properties

We’re used to working with physical properties like margin-right, top, or border-left.

ul {
  display: flex;
  list-style: none;
  padding: 0.5rem 0;
}

li {
  background-color: #6befef;
  margin-right: 2rem;
}

Logical properties

Sizing

Physical propertyLogical property
widthinline-size
max-widthmax-inline-size
min-widthmin-inline-size
heightblock-size
max-heightmax-block-size
min-heightmin-block-size

Borders

Physical propertyLogical property
border-topborder-block-start
border-bottomborder-block-end
border-leftborder-inline-start
border-rightborder-inline-end

Shorthands

Physical propertyLogical property
padding-top and padding-bottompadding-block
padding-left and padding-rightpadding-inline

Margin

Physical propertyLogical property
margin-topmargin-block-start
margin-bottommargin-block-end
margin-leftmargin-inline-start
margin-rightmargin-inline-end

Shorthands

Physical propertyLogical property
margin-top and margin-bottommargin-block
margin-left and margin-rightmargin-inline

Padding

Physical propertyLogical property
padding-toppadding-block-start
padding-bottompadding-block-end
padding-leftpadding-inline-start
padding-rightpadding-inline-end

Shorthands

Physical propertyLogical property
padding-top and padding-bottompadding-block
padding-left and padding-rightpadding-inline

Positioning

Physical propertyLogical property
topinset-block-start
bottominset-block-end
leftinset-inline-start
rightinset-inline-end
top andbottom inset-block
left andright inset-inline

Border radius

Physical propertyLogical property
border-top-left-radiusborder-start-start-radius
border-top-right-radiusborder-start-end-radius
border-bottom-left-radiusborder-end-start-radius
border-bottom-right-radiusborder-end-end-radius

Logical values

Floats

Physical valueLogical value
float: leftfloat: inline-start
float: rightfloat: inline-end
clear: leftclear: inline-start
clear: rightclear: inline-end

Text alignment

Physical valueWriting modeLogical value
text-align: leftLTRtext-align: start
text-align: rightRTLtext-align: start
text-align: leftRTLtext-align: end
text-align: rightLTRtext-align: end

Further reading