Playing with CSS Logical Properties Support

Used in the blog post CSS Logical Properties.

The default state is in bold because it is easier to spot once the layout has gone out of order from what you expect.

Change the body to…

I am using <button> as my examples because they already have borders, inline-block layout, and get focus natively in case you (like me) tab through a page and sometimes set focus to a thing to keep track where you are.

Sizing and Text Alignment

These styles are carried forward for all the buttons after these first two, unless you see them explicitly overridden.

Borders

Headings reflect the original property names, which should be easier for referencing the new property names.

Border Top

Border Right

Border Bottom

Border Left

All the Borders

Border Block

Border Inline

Border Radius

Headings reflect the original property names, which should be easier for referencing the new property names.

Border Top Left Radius

Border Top Right Radius

Border Bottom Right Radius

Border Bottom Left Radius

All the Border Radii

Padding

Headings reflect the original property names, which should be easier for referencing the new property names.

Padding Top

Padding Right

Padding Bottom

Padding Left

Padding Block

Padding Inline

Margin

Headings reflect the original property names, which should be easier for referencing the new property names.

Margin Top

Margin Right

Margin Bottom

Margin Left

Margin Block

Margin Inline