Spacing (Margins and Padding) - Edmon Low Library
Design Guide
Maintenance & Upkeep
Spacing (Margins and Padding)
Guidelines and utility classes for controlling element layout, margin spacing, and internal padding across the Edmon Low Library site.
Utility Naming Convention
Spacing utility classes follow Bootstrap’s standard shorthand notation: {property}{sides}-{size} for margins and padding.
Properties
m— Marginp— Padding
Sides
t— Topb— Bottoms— Start (Left in LTR)e— End (Right in LTR)x— Horizontal (Left & Right)y— Vertical (Top & Bottom)- blank — All 4 sides
Scale Sizes
0— 0rem (0px)1— 0.25rem (4px)2— 0.5rem (8px)3— 1rem (16px)4— 1.5rem (24px)5— 3rem (48px)auto— Auto margin
Standard Spacing Classes
Reference table for quick margin and padding utility lookup.
Spacing Scale & Values
| Class Patterns | Size Step | Calculated Value | Common Use Case |
|---|---|---|---|
.m-0, .p-0 |
0 | 0rem (0px) |
Reset default browser margins or padding. |
.mb-1, .py-1 |
1 | 0.25rem (4px) |
Tight element spacing, minor badge padding. |
.mb-2, .px-2 |
2 | 0.5rem (8px) |
Small gaps between list items or sub-labels. |
.mb-3, .p-3 |
3 | 1.0rem (16px) |
Standard spacing between paragraphs and form controls. |
.mb-4, .p-4 |
4 | 1.5rem (24px) |
Default container padding and card margins. |
.mb-5, .py-5 |
5 | 3.0rem (48px) |
Major section separations and hero banner padding. |
Visual Previews
Comparison of padding and margin scale behavior inside content blocks.
.p-2 (8px Padding)
.p-3 (16px Padding)
.p-4 (24px Padding)
HTML Implementation Examples
Snippet Patterns
<!-- Content box with 24px padding and 48px bottom margin -->
<div class="p-4 mb-5 bg-light rounded shadow-sm">
<h2 class="mb-3">Section Title</h2>
<p class="mb-0">Paragraph with reset bottom margin inside a padded container.</p>
</div>
<!-- Centering an element horizontally with auto margins -->
<div class="mx-auto p-3 text-center" style="max-width: 400px;">
Centered container block
</div>