Spacing

1. Introduction to This Lesson

(1) Prerequisites

Master the Bootstrap typography system (h1~h6, display headings)
Be familiar with text color .text-* and alignment utility classes

(2) 🎯 What You'll Learn

Understand the spacing scale system (0~5) and corresponding rem values
Master the directional abbreviation rules for margin and padding
Learn to use responsive spacing (e.g., p-md-5)
Proficiently use gap-* and mx-auto utility classes
Be able to independently and precisely control spacing between page elements

(3) Pain Point

In the previous lesson, Alice built a personal homepage but found the cards were too cramped and the titles were too close to the text—the traditional way would be to write margin-bottom: 1.5rem for each element.

(4) Solution

Bootstrap's spacing utility classes make all this simple. It provides a set of rem-based spacing utility classes covering all directional combinations of margin and padding, allowing you to precisely control element spacing without writing a single line of CSS. With Bootstrap, just one mb-4 is enough.

(5) Benefit

After using Bootstrap's spacing utility classes, Alice can precisely control element spacing with just classes like mb-4 and p-3, bidding farewell to the tediousness of hand-written CSS, resulting in a cleaner and more efficient page layout.

2. Spacing Scale

The spacing scale ranges from 0 to 5, with each number corresponding to a rem value:

Scale	rem	px (16px base)	Analogy
`0`	0	0px	No spacing
`1`	0.25	4px	Extra small spacing
`2`	0.5	8px	Compact spacing
`3`	1	16px	Standard spacing
`4`	1.5	24px	Large spacing
`5`	3	48px	Extra large spacing

Additionally, there is auto.

3. Property and Direction

Class naming rule: {p|m}{t|b|s|e|x|y|blank}{0|1|2|3|4|5|auto}

TEXT

  m         t          3
  ^         ^          ^
  Property  Direction  Value
          (optional)

Part	Options	Meaning
Property	`m`	margin (outer margin)
	`p`	padding (inner margin)
Direction	`t`	top
	`b`	bottom
	`s`	start (left, logical property)
	`e`	end (right, logical property)
	`x`	left + right (horizontal)
	`y`	top + bottom (vertical)
	blank	all four directions

▶ Example: Spacing Scale Demonstration

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spacing Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box { background: #e9ecef; border: 1px solid #0d6efd; }
    .highlight { background: #0d6efd; color: #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">

    <!-- Margin bottom -->
    <div class="box">
      <div class="highlight mb-0">mb-0</div>
      <div class="highlight mb-1">mb-1 (4px)</div>
      <div class="highlight mb-2">mb-2 (8px)</div>
      <div class="highlight mb-3">mb-3 (16px)</div>
      <div class="highlight mb-4">mb-4 (24px)</div>
      <div class="highlight mb-5">mb-5 (48px)</div>
    </div>

    <hr>

    <!-- Padding all sides -->
    <div class="box p-0"><span>p-0</span></div>
    <div class="box p-3 mt-2"><span>p-3 (16px on all sides)</span></div>
    <div class="box p-5 mt-2"><span>p-5 (48px on all sides)</span></div>

  </div>
</body>
</html>

▶ Try it Yourself

4. Common Spacing Combinations

The most commonly used spacing patterns in actual development:

HTML

<!-- Card list: spacing between cards -->
<div class="card mb-3">Card 1</div>
<div class="card mb-3">Card 2</div>
<div class="card mb-3">Card 3</div>

<!-- Section: vertical padding -->
<section class="py-5">Section with 48px top & bottom padding</section>

<!-- Button: margin around -->
<button class="btn btn-primary me-2">Save</button>
<button class="btn btn-secondary">Cancel</button>

<!-- Container: horizontal padding -->
<div class="px-4">Content with comfortable side padding</div>

▶ Try it Yourself

Pattern	Common Usage	Effect
Card spacing	`mb-3`	16px gap between cards
Section spacing	`py-5`	48px padding top & bottom
Button spacing	`me-2`	8px gap between buttons
Container padding	`px-4`	24px safe padding on left and right

5. Horizontal Centering: mx-auto

When an element has a fixed width, mx-auto achieves horizontal centering:

▶ Example: Horizontal Centering

HTML

<div style="width: 200px;" class="mx-auto bg-primary text-white text-center p-3">
  Centered block with mx-auto
</div>

▶ Try it Yourself

6. Responsive Spacing

Spacing utility classes support all breakpoint suffixes, allowing different spacing for different screen sizes:

HTML

<div class="p-3 p-md-5 bg-light">
  Resize the browser to see padding change at 768px breakpoint.
</div>

▶ Try it Yourself

Usage	Mobile (xs)	Tablet (md+)
`p-3 p-md-5`	16px	48px
`mb-2 mb-lg-0`	8px margin-bottom	0 margin-bottom
`pt-4 pt-xl-5`	24px padding-top	48px padding-top

7. Gap Spacing

In Flexbox and Grid layouts, the gap utility class controls spacing between child elements:

HTML

<div class="d-flex gap-3">
  <div class="bg-primary text-white p-3">Item 1</div>
  <div class="bg-primary text-white p-3">Item 2</div>
  <div class="bg-primary text-white p-3">Item 3</div>
</div>

▶ Try it Yourself

Gap Class	Value	Description
`gap-0`	0	No spacing
`gap-1`	0.25rem	Extra small
`gap-2`	0.5rem	Compact
`gap-3`	1rem	Standard
`gap-4`	1.5rem	Spacious
`gap-5`	3rem	Very large

8. Spacing vs. Container Padding

graph TD
    A[Container padding: 0 12px] --> B[Row margin: 0 -12px]
    B --> C[Col 1 padding: 0 12px]
    B --> D[Col 2 padding: 0 12px]
    B --> E[Col 3 padding: 0 12px]

Layer	Spacing Control Method	Description
Container	Built-in padding	Content doesn't touch edges
Row	Negative margin	Offsets container padding
Column	Built-in padding	Gutter between columns
Inner	`p-` / `m-`	Precise spacing for content elements

(2) Complete Spacing Scale Reference

Scale	rem	px (16px base)	Name	Suitable Scenario
`0`	0	0px	None	Remove default margin
`1`	0.25	4px	Extra small	Gap between icon and text
`2`	0.5	8px	Compact	Spacing in button groups
`3`	1	16px	Standard	Card spacing, paragraph spacing
`4`	1.5	24px	Large	Section spacing
`5`	3	48px	Extra large	Spacing between page sections
`auto`	auto	auto	Auto	Horizontal centering

(3) Responsive Spacing Breakpoints

Usage	Mobile (<576px)	Tablet (>=768px)	Desktop (>=992px)	Large Screen (>=1200px)
`p-3 p-md-4 p-lg-5`	16px	24px	48px	48px
`m-2 m-md-3 m-xl-4`	8px	16px	16px	24px
`px-2 px-lg-4`	8px (left/right)	8px (left/right)	24px (left/right)	24px (left/right)
`py-3 py-md-5`	16px (top/bottom)	48px (top/bottom)	48px (top/bottom)	48px (top/bottom)
`gap-2 gap-lg-4`	8px	8px	24px	24px

▶ Example: Responsive Spacing Page

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-section { background: #f8f9fa; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="container">
    <!-- Hero: responsive padding -->
    <div class="bg-primary text-white text-center px-3 py-5 px-md-5 py-md-6 rounded">
      <h1 class="display-5">Responsive Spacing Demo</h1>
      <p class="mb-0">Resize the browser to observe spacing changes</p>
    </div>

    <!-- Cards: responsive gap -->
    <div class="row g-2 g-md-3 g-lg-4 mt-4">
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>Card One</h5>
          <p class="mb-0 small">p-3 on mobile, p-4 on desktop</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>Card Two</h5>
          <p class="mb-0 small">Gap increases with breakpoint</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>Card Three</h5>
          <p class="mb-0 small">g-2 → g-3 → g-4</p>
        </div>
      </div>
    </div>

    <!-- Info bar -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-center bg-light p-3 p-md-4 mt-4 rounded">
      <span class="mb-2 mb-md-0">flex-column becomes flex-md-row</span>
      <button class="btn btn-primary">Click</button>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Card Layout Spacing

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Blog Article List</h3>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">Article Title One</h5>
        <p class="card-text text-muted small mb-2">January 15, 2026</p>
        <p class="card-text">This is a sample article demonstrating mb-3 spacing between cards.</p>
        <a href="#" class="btn btn-sm btn-primary">Read More</a>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">Article Title Two</h5>
        <p class="card-text text-muted small mb-2">January 14, 2026</p>
        <p class="card-text">Each card has a 16px bottom margin, making the list clear and readable.</p>
        <a href="#" class="btn btn-sm btn-outline-primary">Read More</a>
      </div>
    </div>

    <div class="card mb-4 p-4 bg-light border-0">
      <div class="row g-3">
        <div class="col-6">
          <div class="p-3 bg-primary text-white rounded text-center">py-3 inside</div>
        </div>
        <div class="col-6">
          <div class="p-3 bg-success text-white rounded text-center">g-3 gutter</div>
        </div>
      </div>
    </div>

    <div class="d-flex gap-2 justify-content-end">
      <button class="btn btn-secondary">Previous</button>
      <button class="btn btn-primary">Next</button>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

▶ Example: Form Spacing

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <h3 class="mb-4">User Registration</h3>

        <form>
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
          </div>

          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" placeholder="name@example.com">
          </div>

          <div class="mb-3">
            <label for="pwd" class="form-label">Password</label>
            <input type="password" class="form-control" id="pwd">
            <div class="form-text text-muted mt-1">Password must be at least 8 characters long.</div>
          </div>

          <div class="mb-4 form-check">
            <input type="checkbox" class="form-check-input" id="agree">
            <label class="form-check-label" for="agree">Agree to Terms of Service</label>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">Register</button>
            <button type="reset" class="btn btn-outline-secondary">Reset</button>
          </div>
        </form>

        <p class="text-muted small mt-4 mb-0">Tip: All input spacing is uniformly controlled using mb-3.</p>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

❓ Frequently Asked Questions

Q Can an element use multiple spacing classes? Does the order affect the result?

A Yes, and no. class="mt-3 mb-4 p-2" sets a 16px top margin, 24px bottom margin, and 8px padding on all sides simultaneously. In CSS cascade, later-defined classes override earlier ones if values differ, but Bootstrap's spacing classes don't conflict, so order doesn't matter.

Q p-5 is 48px, which feels too large. What should I do?

A There are three options: (1) Use p-4 (24px) or p-3 (16px); (2) Customize the CSS variable --bs-gutter-x to adjust grid spacing; (3) In Phase 5, when covering Sass customization, you can modify the $spacer variable to redefine the entire scale.

Q Why does mx-auto only work on block-level elements?

A margin: auto in CSS specifications requires the element to have a defined width (anything but auto) and be block-level (display: block). Inline elements have no width concept, so mx-auto doesn't work.

Q Does Bootstrap support negative margins?

A Bootstrap supports limited negative margins. It provides classes like m{n|s|e|t|b|x|y}-n{1|2|3|4|5}, e.g., mt-n3 means negative 1rem top margin. Negative margins are often used to offset container padding or create overlap effects. Note that negative values don't apply to padding and gap, and responsive suffixes (like mt-md-n3) are also supported.

Q How do spacing classes work in nested elements?

A Spacing classes only affect the current element and don't inherit. Child elements don't automatically inherit the parent's p-* or m-*. In nested scenarios, a common practice is: set p-* on the parent container for padding, and mb-* on child elements for spacing. Responsive breakpoint suffixes also work in nesting—class="px-3 px-md-5" behaves consistently across different screen sizes.

📖 Summary

Spacing class format: {m|p}{t|b|s|e|x|y}{0|1|2|3|4|5|auto}
Scales 0 to 5 correspond to 0 to 3rem, based on the $spacer variable (default 1rem)
Responsive suffixes: mt-md-3, p-lg-5, etc., achieve different spacing on different screens
gap-* controls spacing between flex/grid child elements, mx-auto horizontally centers
The spacing system is consistent with the grid gutter (base unit 0.5rem)

📝 Homework

⭐ Use spacing classes to build a three-card layout: gap-3 between cards, p-4 inside cards, py-5 for the outer container, and add an extra mt-3 on the first card to observe the effect.
⭐⭐ Create a section with responsive spacing: px-3 py-4 on mobile, px-5 py-5 on desktop.
⭐⭐⭐ Create a centered button group (mx-auto + d-flex + gap-2) with three buttons having 8px spacing between them.

Previous Lesson: Typography · Next Lesson: Flexbox

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

404 Not Found

Spacing

1. Introduction to This Lesson

(1) Prerequisites

(2) 🎯 What You'll Learn

(3) Pain Point

(4) Solution

(5) Benefit

2. Spacing Scale

3. Property and Direction

▶ Example: Spacing Scale Demonstration

4. Common Spacing Combinations

5. Horizontal Centering: mx-auto

▶ Example: Horizontal Centering

6. Responsive Spacing

7. Gap Spacing

8. Spacing vs. Container Padding

(2) Complete Spacing Scale Reference

(3) Responsive Spacing Breakpoints

▶ Example: Responsive Spacing Page

▶ Example: Card Layout Spacing

▶ Example: Form Spacing

❓ Frequently Asked Questions

📖 Summary

📝 Homework

🙏 帮我们做得更好