0Pricing
CSS Academy · Lesson

Logical Margin Padding and Border

Replace top/right/bottom/left with start/end/block/inline logical property equivalents.

Logical Equivalents for Spacing

Physical spacing properties have logical counterparts that use block/inline directions:

  • margin-top → margin-block-start
  • margin-bottom → margin-block-end
  • margin-left → margin-inline-start
  • margin-right → margin-inline-end

Logical Shorthand Properties

New shorthand properties cover both block sides or both inline sides:

.card {
  margin-block: 24px;    /* top and bottom */
  margin-inline: auto;   /* left and right (centered) */
  padding-block: 16px;   /* top and bottom padding */
  padding-inline: 24px;  /* left and right padding */
}

All lessons in this course

  1. Why Logical Properties: Internationalization
  2. Block and Inline Directions
  3. Logical Margin Padding and Border
  4. Logical Properties in RTL Layouts
← Back to CSS Academy