CSS Logical Properties

Create spacing that works regardless of the direction of your content or the environment of your users.

Say you want to put some space between two inline items: what do you do? Probably something like this:

.my-element {
    margin-left: 1em;
}

This approach is fine and has been for a long time with CSS, but what happens when the content direction changes? That left margin suddenly becomes problematic because it no longer matches and makes the content look awkward.

Western languages read left to right, but other languages such as Arabic, read right to left. Some languages even read top to bottom, like traditional Chinese.

Our CSS should be as flexible as possible, so instead of explicitly setting a left, right, top or bottom value to margins, we should instead be using a logical property.

Here’s that same example from the start, but with a logical property:

.my-element {
    margin-inline-start: 1em;
}

What this now does is instead of saying “add margin to the left”, it says “regardless of direction, put margin on the starting side”. If the language of the document was right to left, like Arabic, that margin would be on the right hand side.

Why is this important?

The web is global and open, so making presumptions about the users of your website is pretty dangerous.

A variety of factors come into play when someone visits your site, such as connection speed, device power and spoken language. They could also be using a translation extension. It’s our job as web developers to make our content as flexible as possible to meet user needs, regardless of what those needs are, using the powerful, flexible tools that are given to us by the web platform.

Logical properties are a perfect example of this and they have a huge browser support, so you should absolutely use them today.

Resources and further learning permalink

This is only a quick intro to logical properties, but luckily, some other fine folks from around the web have written about them in detail:

CSS Logical Properties - CSS-Tricks
CSS Logical Properties and Values - MDN
Understanding Logical Properties And Values
CSS Logical Properties - Adrian Roselli

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

📖 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X