CSS Academy · Lesson

Logical Margin Padding and Border

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

Logical Margin Padding and Border is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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 */
}

Centering with margin-inline: auto

The classic centering pattern now has a logical equivalent:

.container {
  max-inline-size: 1200px;
  margin-inline: auto;     /* centers horizontally in LTR/RTL */
}

Logical Border Properties

Set borders on logical sides:

.card {
  border-block-start: 4px solid royalblue; /* top border in LTR */
}

.quote {
  border-inline-start: 4px solid gold;     /* left border in LTR, right in RTL */
  padding-inline-start: 16px;
}

Logical Position Properties

Positioning properties also have logical counterparts:

top → inset-block-start
bottom → inset-block-end
left → inset-inline-start
right → inset-inline-end

inset Shorthand

The inset property is already logical shorthand for all four sides. inset-block and inset-inline provide two-axis control.

.overlay {
  position: absolute;
  inset: 0;            /* all four sides: 0 */
  inset-block: 10px;   /* top and bottom: 10px */
}

Logical Sizing Properties

Width and height have logical equivalents:

.box {
  inline-size: 200px;    /* width in LTR */
  block-size: 100px;     /* height in LTR */
  min-inline-size: 120px;
  max-block-size: 400px;
}

Comparison: Physical vs Logical

A sidebar with a start-side border:

/* Physical — breaks in RTL */
.sidebar { border-left: 4px solid navy; }

/* Logical — adapts in RTL */
.sidebar { border-inline-start: 4px solid navy; }

float and clear Logical Values

The float and clear properties now support logical values:

.figure { float: inline-start; } /* left in LTR, right in RTL */
.clear  { clear: inline-start; }

Logical text-align

text-align: start and text-align: end are logical alternatives to left and right, automatically adapting to the text direction.

.nav-link { text-align: start; } /* left in LTR, right in RTL */

Migration Strategy

For new code, prefer logical properties. For existing code, refactor one component at a time. Priority order for migration: spacing (margin/padding), borders, sizing, positioning.

Quick Check

Which logical property is the equivalent of margin-left in a LTR layout that should become margin-right in RTL?

Recap

Logical margin, padding, and border properties use block and inline directions instead of physical top/right/bottom/left. Shorthands like margin-block, padding-inline, and inset-block cover both sides at once. Prefer logical properties for all spacing in new code to get automatic RTL and vertical writing mode support.

Frequently asked questions

Is the “Logical Margin Padding and Border” lesson free?

Yes — the full text of “Logical Margin Padding and Border” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Logical Margin Padding and Border”?

Replace top/right/bottom/left with start/end/block/inline logical property equivalents. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Logical Margin Padding and Border” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Why Logical Properties: Internationalization
Block and Inline Directions
Logical Margin Padding and Border
Logical Properties in RTL Layouts

← Back to CSS Academy