CSS Logical Properties

This is a repost promoting content originally published elsewhere. See more things Dan's reposted.

...

.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.

...

This is clever. If you use e.g. margin-left on every list element after the first to put space "between" them, the spacing isn't quite right when the order of the elements is reversed, for example because your page has been automatically translated into a language that reads in the opposite direction (e.g. right-to-left, rather than left-to-right). When you use margin-left in this way you're imposing a language-direction-centric bias on your content, and there's no need: margin-inline-start and its friends are widely-supported and says what you mean: "place a margin before this element". I'll be trying to remember to use this where it's appropriate from now on.

0 comments

    Leave a comment

    Reply on your own site