PricingLoginStart free
CSS Academy · Lesson

Logical Margin Padding and Border

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

Lesson 3 of 413 steps

Logical Margin Padding and Border is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

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:

<div class="card">Card with logical spacing</div>

Centering with margin-inline: auto

The classic centering pattern now has a logical equivalent:

<div class="container">Centered container</div>

Logical Border Properties

Set borders on logical sides:

<div class="card">Card with top border</div>
<blockquote class="quote">Quoted text with a gold side border</blockquote>

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.

<div class="wrap"><div class="overlay"></div></div>

Logical Sizing Properties

Width and height have logical equivalents:

<div class="box">Sized box</div>

Comparison: Physical vs Logical

A sidebar with a start-side border:

<div class="sidebar-physical">Physical (border-left)</div>
<div class="sidebar-logical">Logical (border-inline-start)</div>

float and clear Logical Values

The float and clear properties now support logical values:

<div class="figure"></div><p>Text wraps around the floated figure.</p><div class="clear">Cleared element</div>

Logical text-align

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

<div class="nav-link">Aligned to the start (left in LTR)</div>

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?

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
40
Lessons
159
Start learning freeView the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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

  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