Espaçamento CSS

O que é

É o "ar" do layout: a folga dentro de um card, a distância entre um bloco e outro, o espaço entre botões lado a lado. Em vez de inventar números, você usa uma régua de 7 tamanhos com nomes curtos — pp (bem pequeno), p, m (médio), g (grande), gg, xg, xxg (enorme) — e a mesma régua vale para os três tipos de espaço. Aprendeu uma vez, usou em tudo.

É só CSS. A classe é tipo + tamanho: p-g = padding (espaço de dentro) grande, m-m = margin (espaço de fora) médio, gap-p = espaço entre os itens, pequeno. Para um lado só, acrescente a letra do lado: t cima, b baixo, l esquerda, r direita (pt-g, mb-m). Para dois lados de uma vez: x (esquerda e direita) e y (cima e baixo) — px-g, my-p. Os tamanhos vêm das variáveis --sw-s-pp…--sw-s-xxg e crescem junto se você aumentar o --sw-type-scale.

Quando usar

• Folga dentro de card, botão, caixa: p-m ou p-g.
• Espaço entre seções da página: py-xg na <section>.
• Botões ou ícones lado a lado: flx gap-p no pai (melhor que margem em cada um).
• Campos de formulário empilhados: flx f-cl gap-m.
• Afastar só um lado (título do texto de baixo): mb-m.
• Centralizar um bloco com largura menor: mx-au.

Comece aqui

1. 1

   Coloque o SW Core no <head>. Todas as classes de espaço estão no arquivo principal.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Escolha o tipo e o tamanho. Aqui: espaço de dentro grande (p-g) no card e espaço médio entre os botões (gap-m).

   Plano Profissional — R$ 99/mês

   AssinarDetalhes

   <div class="bg-sur bd r-m p-g">
     <p>Plano Profissional — R$ 99/mês</p>
     <div class="flx gap-m">
       <button sw-btn="pri">Assinar</button>
       <button sw-btn="out">Detalhes</button>
     </div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<section class="bg-sur bd r-m py-xg px-g t-ct">
  <p class="t-gg t-txt mb-p">Pronto para começar?</p>
  <p class="mb-g">Fale com a gente e receba um orçamento hoje.</p>
  <a href="/contato" sw-btn="pri">Pedir orçamento</a>
</section>

<form class="flx f-cl gap-m g-p mx-au">
  <div sw-fld><label for="nome">Nome</label><input sw-inp id="nome" placeholder="Seu nome"></div>
  <div sw-fld><label for="tel">WhatsApp</label><input sw-inp id="tel" placeholder="(11) 90000-0000"></div>
  <button sw-btn="pri">Quero ser chamado</button>
</form>

<nav class="flx alc gap-m bg-sur bd r-m px-g py-p">
  <strong>Studio Sol</strong>
  <a href="/servicos">Serviços</a>
  <a href="/contato">Contato</a>
  <a href="/agendar" sw-btn="pri p" class="ml-au">Agendar</a>
</nav>

<div class="flx f-wr gap-p">
  <span class="bg-pri-soft t-pri px-p py-pp r-p t-p">Corte</span>
  <span class="bg-pri-soft t-pri px-p py-pp r-p t-p">Barba</span>
  <span class="bg-pri-soft t-pri px-p py-pp r-p t-p">Sobrancelha</span>
  <!-- … -->
</div>

Precisa de quê

• swcore.min.css — todas as classes desta página.

Cuidados — erros comuns

• gap só funciona no pai que é flx, l ou grd. Num <div> comum ele não faz nada.
• Para espaço entre itens lado a lado, prefira gap no pai a mr- em cada filho: com margem o último item fica com espaço sobrando e a quebra de linha desalinha.
• Não existe p-5, m-7 nem p-9 (a escala antiga pula esses números). Use a régua com nome: p-m, p-g…
• mx-au só centraliza se o bloco for mais estreito que o pai (ex.: g-p mx-au, ou uma largura no seu CSS).
• Margem de cima de um bloco e margem de baixo do anterior não somam: o navegador fica com a maior (isso é normal do CSS). Dentro de flx/l isso não acontece.
• As classes de espaço usam !important: elas vencem o CSS do componente. Se um espaço "não sai", confira se não tem outra classe de espaço brigando no mesmo elemento.

O que ele não faz

• Não tem versão por tamanho de tela (p-g-m não existe): o espaço é o mesmo no celular e no computador. Para mudar por tela, use o seu CSS com var(--sw-s-*).
• gap-x-/gap-y- vão só até gg (não existe gap-x-xg).
• Não há margem negativa.