CSS 筆記:Logical properties 中的 margin-inline-end


margin-inline-end example 1

margin-inline-end example 2

See the Pen margin-inline-end by Charlie (@Charlie7779) on CodePen.


Logical properties

MDN: The margin-inline-end CSS property defines the logical inline end margin of an element, which maps to a physical margin depending on the element’s writing mode, directionality, and text orientation.

web.dev: A logical property is one that references a side, corner or axis of the box model in context of the applicable language direction. It’s akin to referencing someone’s strong arm, rather than assuming it’s their right arm. “Right” is a physical arm reference, “strong” is a logical arm reference, contextual to the individual.

Inline dimension

The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.