CSS Logical Properties Generator

Generate logical properties for internationalization-ready CSS

Property Type

Unit

Block Start (Top in LTR)

Block End (Bottom in LTR)

Inline Start (Left in LTR)

Inline End (Right in LTR)

Logical Properties CSS

.element {
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.element {
  /* Physical equivalent (LTR, horizontal-tb) */
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

Block axis: The direction perpendicular to text flow (vertical in horizontal writing modes)

Inline axis: The direction of text flow (horizontal in LTR/RTL languages)

Benefits: Automatically adapts to different writing modes and text directions without changing CSS