ZeroServer.tools

CSS Logical Properties

Convert CSS physical properties (margin-left, width) to logical properties (margin-inline-start, inline-size) for RTL/LTR support.

Physical CSS

Logical CSS16 changed

.card {
  margin-block-start: 16px;
  margin-block-end: 24px;
  margin-inline-start: 8px;
  margin-inline-end: 8px;
  padding-block-start: 12px;
  padding-block-end: 12px;
  padding-inline-start: 16px;
  padding-inline-end: 16px;
  border-inline-start: 2px solid blue;
  border-inline-end: none;
  inline-size: 100%;
  min-inline-size: 200px;
  max-inline-size: 600px;
  block-size: auto;
  text-align: start;
  float: inline-start;
}

CSS Logical Properties Converter

CSS Logical Properties map physical directions (top, left, right, bottom) to logical directions that respect the document writing mode. In a left-to-right document, margin-inline-start equals margin-left; in RTL it automatically maps to margin-right. Logical properties are now supported in all modern browsers (Chrome 89+, Firefox 68+, Safari 15+).

Private & free — this tool runs entirely in your browser.