English 中文 العربية 日本語 Português

Bootstrap: Espaçamento

Última atualização: 2026-08-26

1. Introdução a Esta Lição

(1) Pré-requisitos

(2) 🎯 O que você aprenderá

(3) Ponto de Dor

Na lição anterior, Alice construiu uma página pessoal, mas percebeu que os cards estavam muito apertados e os títulos muito próximos do texto—a forma tradicional seria escrever margin-bottom: 1.5rem para cada elemento.

(4) Solução

As classes utilitárias de espaçamento do Bootstrap tornam tudo isso simples. Ele fornece um conjunto de classes utilitárias de espaçamento baseadas em rem, cobrindo todas as combinações direcionais de margin e padding, permitindo controlar precisamente o espaçamento dos elementos sem escrever uma linha de CSS. Com o Bootstrap, basta um mb-4.

Entendendo: O sistema de espaçamento do Bootstrap é como uma "régua de degraus"—cada número representa um valor de escala fixo (de 0.25rem a 3rem). Você só escolhe o número, não precisa decorar valores em pixels.

(5) Benefício

Depois de usar as classes utilitárias de espaçamento do Bootstrap, Alice pode controlar precisamente o espaçamento dos elementos com apenas classes como mb-4 e p-3, deixando para trás o tedioso CSS escrito à mão, resultando em um layout de página mais limpo e eficiente.

2. Escala de Espaçamento

A escala de espaçamento vai de 0 a 5, com cada número correspondendo a um valor rem:

Escala rem px (base 16px) Analogia
0 0 0px Sem espaçamento
1 0.25 4px Espaçamento extra pequeno
2 0.5 8px Espaçamento compacto
3 1 16px Espaçamento padrão
4 1.5 24px Espaçamento grande
5 3 48px Espaçamento extra grande

Além disso, existe auto.

3. Propriedade e Direção

Regra de nomenclatura de classes: {p|m}{t|b|s|e|x|y|blank}{0|1|2|3|4|5|auto}

TEXT 📖 Somente leitura 
  m         t          3
  ^         ^          ^
  Propriedade  Direção  Valor
          (opcional)
Parte Opções Significado
Propriedade m margin (margem externa)
p padding (margem interna)
Direção t top (topo)
b bottom (baixo)
s start (início, esquerda em LTR)
e end (fim, direita em LTR)
x esquerda + direita (horizontal)
y topo + baixo (vertical)
blank todas as quatro direções

Nota: O Bootstrap 5 usa propriedades lógicas s (start) e e (end) em vez de l (left) e r (right) para melhor suportar idiomas RTL (right-to-left). Em contextos em chinês e inglês, s = esquerda, e = direita.

▶ Exemplo: Demonstração da Escala de Espaçamento

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Espaçamento</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 em todos os lados)</span></div>
    <div class="box p-5 mt-2"><span>p-5 (48px em todos os lados)</span></div>

  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

4. Combinações Comuns de Espaçamento

Os padrões de espaçamento mais usados no desenvolvimento real:

HTML 
<!-- Lista de cards: espaçamento entre 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>

<!-- Seção: padding vertical -->
<section class="py-5">Seção com 48px de padding superior e inferior</section>

<!-- Botão: margin ao redor -->
<button class="btn btn-primary me-2">Salvar</button>
<button class="btn btn-secondary">Cancelar</button>

<!-- Contêiner: padding horizontal -->
<div class="px-4">Conteúdo com padding lateral confortável</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Padrão Uso Comum Efeito
Espaçamento de card mb-3 16px entre cards
Espaçamento de seção py-5 48px de padding superior e inferior
Espaçamento de botão me-2 8px entre botões
Padding do contêiner px-4 24px de padding seguro esquerda/direita

5. Centralização Horizontal: mx-auto

Quando um elemento tem largura fixa, mx-auto faz a centralização horizontal:

▶ Exemplo: Centralização Horizontal

HTML 
<div style="width: 200px;" class="mx-auto bg-primary text-white text-center p-3">
  Bloco centralizado com mx-auto
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default. mx-auto é equivalente a CSS margin-left: auto; margin-right: auto; e se aplica a todos os elementos de nível de bloco.

6. Espaçamento Responsivo

As classes utilitárias de espaçamento suportam todos os sufixos de breakpoint, permitindo espaçamentos diferentes para diferentes tamanhos de tela:

HTML 
<div class="p-3 p-md-5 bg-light">
  Redimensione o navegador para ver o padding mudar no breakpoint de 768px.
</div>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Uso 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. Espaçamento Gap

Em layouts Flexbox e Grid, a classe utilitária gap controla o espaçamento entre elementos filhos:

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>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Classe Gap Valor Descrição
gap-0 0 Sem espaçamento
gap-1 0.25rem Extra pequeno
gap-2 0.5rem Compacto
gap-3 1rem Padrão
gap-4 1.5rem Espaçoso
gap-5 3rem Muito grande

8. Espaçamento vs. Padding do Contêiner

100% 
graph TD
    A[Padding do contêiner: 0 12px] --> B[Margin da row: 0 -12px]
    B --> C[Padding Col 1: 0 12px]
    B --> D[Padding Col 2: 0 12px]
    B --> E[Padding Col 3: 0 12px]

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Camada Método de Controle de Espaçamento Descrição
Contêiner Padding embutido Conteúdo não encosta nas bordas
Row Margin negativa Compensa o padding do contêiner
Coluna Padding embutido Gutter entre colunas
Interno p-* / m-* Espaçamento preciso para elementos de conteúdo

(2) Referência Completa da Escala de Espaçamento

Escala rem px (base 16px) Nome Cenário Adequado
0 0 0px Nenhum Remover margin padrão
1 0.25 4px Extra pequeno Espaço entre ícone e texto
2 0.5 8px Compacto Espaçamento em grupos de botões
3 1 16px Padrão Espaçamento de card, espaçamento de parágrafo
4 1.5 24px Grande Espaçamento de seção
5 3 48px Extra grande Espaçamento entre seções de página
auto auto auto Auto Centralização horizontal

(3) Breakpoints de Espaçamento Responsivo

Uso Mobile (<576px) Tablet (>=768px) Desktop (>=992px) Tela Grande (>=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 (esq/dir) 8px (esq/dir) 24px (esq/dir) 24px (esq/dir)
py-3 py-md-5 16px (topo/baixo) 48px (topo/baixo) 48px (topo/baixo) 48px (topo/baixo)
gap-2 gap-lg-4 8px 8px 24px 24px

▶ Exemplo: Página de Espaçamento Responsivo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Espaçamento Responsivo</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: padding responsivo -->
    <div class="bg-primary text-white text-center px-3 py-5 px-md-5 py-md-6 rounded">
      <h1 class="display-5">Demonstração de Espaçamento Responsivo</h1>
      <p class="mb-0">Redimensione o navegador para observar as mudanças de espaçamento</p>
    </div>

    <!-- Cards: gap responsivo -->
    <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 Um</h5>
          <p class="mb-0 small">p-3 no mobile, p-4 no desktop</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>Card Dois</h5>
          <p class="mb-0 small">O gap aumenta com o breakpoint</p>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="demo-section p-3 p-md-4">
          <h5>Card Três</h5>
          <p class="mb-0 small">g-2 → g-3 → g-4</p>
        </div>
      </div>
    </div>

    <!-- Barra de informações -->
    <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 vira flex-md-row</span>
      <button class="btn btn-primary">Clique</button>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Espaçamento de Layout de Card

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Espaçamento de Card</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">Lista de Artigos do Blog</h3>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">Título do Artigo Um</h5>
        <p class="card-text text-muted small mb-2">15 de janeiro de 2026</p>
        <p class="card-text">Este é um artigo de exemplo demonstrando o espaçamento mb-3 entre cards.</p>
        <a href="#" class="btn btn-sm btn-primary">Ler Mais</a>
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">Título do Artigo Dois</h5>
        <p class="card-text text-muted small mb-2">14 de janeiro de 2026</p>
        <p class="card-text">Cada card tem uma margin-bottom de 16px, deixando a lista clara e legível.</p>
        <a href="#" class="btn btn-sm btn-outline-primary">Ler Mais</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 dentro</div>
        </div>
        <div class="col-6">
          <div class="p-3 bg-success text-white rounded text-center">gutter g-3</div>
        </div>
      </div>
    </div>

    <div class="d-flex gap-2 justify-content-end">
      <button class="btn btn-secondary">Anterior</button>
      <button class="btn btn-primary">Próximo</button>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Espaçamento de Formulário

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Espaçamento de Formulário</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">Registro de Usuário</h3>

        <form>
          <div class="mb-3">
            <label for="name" class="form-label">Nome</label>
            <input type="text" class="form-control" id="name" placeholder="Digite seu nome">
          </div>

          <div class="mb-3">
            <label for="email" class="form-label">E-mail</label>
            <input type="email" class="form-control" id="email" placeholder="nome@exemplo.com">
          </div>

          <div class="mb-3">
            <label for="pwd" class="form-label">Senha</label>
            <input type="password" class="form-control" id="pwd">
            <div class="form-text text-muted mt-1">A senha deve ter pelo menos 8 caracteres.</div>
          </div>

          <div class="mb-4 form-check">
            <input type="checkbox" class="form-check-input" id="agree">
            <label class="form-check-label" for="agree">Concordar com os Termos de Serviço</label>
          </div>

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

        <p class="text-muted small mt-4 mb-0">Dica: Todo o espaçamento dos inputs é controlado uniformemente com mb-3.</p>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: Bootstrap 5.3 styled component effects (like buttons, cards, carousels, collapses, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

❓ Perguntas Frequentes

P: Um elemento pode usar múltiplas classes de espaçamento? A ordem afeta o resultado? R: Sim, e não. class="mt-3 mb-4 p-2" define simultaneamente 16px de margin-top, 24px de margin-bottom e 8px de padding em todos os lados. Em cascata CSS, classes definidas depois sobrescrevem as anteriores se os valores diferirem, mas as classes de espaçamento do Bootstrap não conflitam, então a ordem não importa.

P: p-5 é 48px, o que parece muito grande. O que devo fazer? R: Há três opções: (1) Usar p-4 (24px) ou p-3 (16px); (2) Personalizar a variável CSS --bs-gutter-x para ajustar o espaçamento da grade; (3) Na Fase 5, ao cobrir a personalização Sass, você pode modificar a variável $spacer para redefinir toda a escala.

P: Por que mx-auto só funciona em elementos de nível de bloco? R: margin: auto nas especificações CSS exige que o elemento tenha uma largura definida (qualquer coisa exceto auto) e seja de nível de bloco (display: block). Elementos inline não têm conceito de largura, então mx-auto não funciona.

P: O Bootstrap suporta margens negativas? R: O Bootstrap suporta margens negativas limitadas. Ele fornece classes como m{n|s|e|t|b|x|y}-n{1|2|3|4|5}, ex.: mt-n3 significa margin-top negativa de 1rem. Margens negativas são frequentemente usadas para compensar o padding do contêiner ou criar efeitos de sobreposição. Observe que valores negativos não se aplicam a padding e gap, e sufixos responsivos (como mt-md-n3) também são suportados.

P: Como as classes de espaçamento funcionam em elementos aninhados? R: As classes de espaçamento afetam apenas o elemento atual e não são herdadas. Elementos filhos não herdam automaticamente o p-* ou m-* do pai. Em cenários aninhados, uma prática comum é: definir p-* no contêiner pai para padding, e mb-* nos elementos filhos para espaçamento. Sufixos de breakpoint responsivos também funcionam em aninhamento—class="px-3 px-md-5" se comporta de forma consistente em diferentes tamanhos de tela.

📖 Resumo

📝 Exercícios

  1. ⭐ Use classes de espaçamento para construir um layout de três cards: gap-3 entre cards, p-4 dentro dos cards, py-5 para o contêiner externo, e adicione um mt-3 extra no primeiro card para observar o efeito.
  2. ⭐⭐ Crie uma seção com espaçamento responsivo: px-3 py-4 no mobile, px-5 py-5 no desktop.
  3. ⭐⭐⭐ Crie um grupo de botões centralizado (mx-auto + d-flex + gap-2) com três botões tendo 8px de espaçamento entre eles.

Lição Anterior: Tipografia · Próxima Lição: Flexbox

Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%