CSS - Margin & Padding

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 8–12 minutes

Control space inside and outside elements with padding and margin. Prefer logical properties for internationalization.

Learning Objectives

• Use shorthand vs longhand spacing properties.
• Adopt logical properties (margin-inline, margin-block) for writing-mode support.

Details & Examples

Use logical properties to support writing modes: margin-block, margin-inline, padding-block, padding-inline.

.panel{ margin: 8px 12px; padding: 12px; }
.panel-logic{ margin-block: 8px; margin-inline: 12px; }

Pitfalls

• Confusing axis directions; remember inline ≈ x-axis in LTR, block ≈ y-axis.

Checks for Understanding

1. Which property would you use to add space above and below elements in vertical writing modes?

Exercises

1. Replace physical margins with logical properties for internationalization.
2. Create a spacing scale and apply consistent margins to components.