Spacing Patterns in CSS
From the CSS cheat sheet · Box Model · verified Jul 2026
Spacing Patterns
Common margin and padding shorthand patterns and spacing techniques
css
/* Shorthand: Top Right Bottom Left (clockwise) */
margin: 10px 20px 15px 5px;
padding: 1rem 2rem; /* Vertical | Horizontal */
/* Logical properties (LTR/RTL aware) */
margin-inline: auto; /* Center horizontally */
padding-block: 1rem; /* Top + bottom */💡 display: grid; place-items: center is the shortest way to center anything
⚡ gap works in both flex and grid — replaces margin hacks between items
📌 margin-inline: auto centers horizontally; margin: auto in grid/flex centers both axes
🟢 Build a spacing scale with CSS variables for consistent design system spacing
spacingmargincenteringgap
Continue with CSS
Save the full cheat sheet or work through every related task.