Espaçamento

Digamos que você tenha uma coleção de três caixas, empilhados uns sobre os outros, e quer espaço entre eles. De quantas maneiras você pode fazer isso no CSS?

Três caixas empilhadas com uma seta para baixo

A propriedade margin pode oferecer o que você precisa, mas também pode adicionar espaçamentos indesejados. Por exemplo, como segmentar apenas o espaço entre esses elementos? Algo como gap pode ser mais apropriado nesse caso. Há muitas maneiras de ajustar o espaçamento em uma interface, cada um com seus próprios pontos fortes e ressalvas.

Espaçamento HTML

O próprio HTML fornece alguns métodos para espaçar elementos. Os elementos <br> e <hr> permitem espaçar elementos na direção do bloco. Se você estiver em um idioma latino, de cima para baixo.

Se você usar um elemento <br>, isso vai criar uma quebra de linha, como se você pressionasse a tecla Enter em um processador de texto.

O <hr> cria uma linha horizontal com espaço para os dois lados, conhecida como margin.

Além de usar elementos HTML, As entidades HTML podem criar espaço. Uma entidade HTML é uma string reservada de caracteres que são substituídas por entidades de caracteres pelo navegador. Por exemplo: se você digitasse &copy; no seu arquivo HTML, ele será convertido em um caractere ©. A entidade &nbsp; é convertida em um caractere de espaço sem quebra, que fornece um espaço inline. No entanto, tenha cuidado, porque o aspecto contínuo desse personagem une os dois elementos, o que pode resultar em um comportamento estranho.

Margem

Se você quiser adicionar espaço à parte externa de um elemento, use a propriedade margin. A margem é como adicionar uma amortecimento ao redor do elemento. A propriedade margin é uma abreviação de margin-top, margin-right, margin-bottom e margin-left.

Um diagrama das quatro áreas principais do modelo de box.

A abreviação margin aplica propriedades em uma ordem específica: superior, direita, inferior e esquerda. Você pode se lembrar delas com problemas: TROUBLe.

A palavra &quot;Problemas&quot; correndo para baixo com T, R, B e L
estendendo para &quot;Superior&quot;, &quot;Direita&quot;, &quot;Inferior&quot; e &quot;Esquerda&quot;.
Uma caixa com setas mostrando as rotas também.

A abreviação margin também pode ser usada com um, dois ou três valores. Adicionar um quarto valor permite definir cada lado individual. Eles são aplicados da seguinte forma:

  • Um valor será aplicado a todos os lados. (margin: 20px).
  • Dois valores: o primeiro valor será aplicado às laterais superior e inferior, e o segundo será aplicado à esquerda e à direita. (margin: 20px 40px)
  • Três valores: o primeiro valor é top, o segundo valor é left e right, e o terceiro valor é bottom. (margin: 20px 40px 30px).

A margem pode ser definida com um comprimento, porcentagem ou valor automático, como 1em ou 20%. Se você usar uma porcentagem, o valor será calculado com base na largura do bloco que o contém.

Isso significa que, se o bloco que contém o elemento tiver uma largura de 250px e seu elemento tiver um valor margin de 20%: cada lado do elemento terá uma margem calculada de 50px.

Também é possível usar um valor de auto para margem. Para elementos em nível de bloco com um tamanho restrito, uma margem de auto ocupará o espaço disponível na direção em que é aplicada. Um bom exemplo é esse, do módulo flexbox, em que os itens se afastam uns dos outros.

Outro bom exemplo de margem de auto é um wrapper centralizado horizontalmente que tem uma largura máxima. Esse tipo de wrapper é frequentemente usado para criar uma coluna central consistente em um site.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

Aqui, a margem é removida das laterais superior e inferior (bloco), e auto compartilha o espaço entre os lados esquerdo e direito (in-line).

Margem negativa

Valores negativos também podem ser usados para margem. Em vez de adicionar espaço entre elementos irmãos adjacentes, isso reduz o espaço entre eles. Isso pode resultar na sobreposição de elementos, se você declarar um valor negativo que é maior que o espaço disponível.

Redução da margem

O colapso da margem é um conceito complicado, mas é algo que você encontrará muito comumente ao criar interfaces. Digamos que você tenha dois elementos: um cabeçalho e um parágrafo com margem vertical:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>
h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

À primeira vista, por pensar que o parágrafo terá um espaçamento de 5em do título, porque 2rem e 3rem combinados calculam 5rem. No entanto, como a margem vertical é recolhida, o espaço é, na verdade, 3rem.

O recolhimento da margem funciona ao selecionar o maior valor de dois elementos adjacentes com margem vertical definida nos lados adjacentes. A parte de baixo da h1 encontra a parte superior da p, Assim, o maior valor da margem inferior de h1 e da margem superior de p é selecionado. Se o h1 tivesse 3.5rem de margem inferior, o espaço entre elas seria 3.5rem, porque é maior do que 3rem. Somente as margens do bloco são recolhidas, não as margens em linha (horizontais).

O recolhimento da margem também ajuda com elementos vazios. Se você tiver um parágrafo com margens de cima e de baixo de 20px, isso vai criar apenas 20px de espaço, e não 40px. Se algo for adicionado ao elemento dentro desse elemento, incluindo padding, a margem não será mais recolhida e será tratada como qualquer caixa com conteúdo.

Teste seu conhecimento

Teste seus conhecimentos sobre a redução de margem

Se dois elementos empilhados um sobre o outro tiverem 20 px de margem superior e 30px de margem inferior, qual será o espaço entre eles?

20px
30px
10px
40px

Como evitar o recolhimento da margem

Se você colocar um elemento em uma posição absoluta, usando position: absolute, a margem não será mais recolhida. A margem também não será recolhida se você usar a propriedade float.

Se você tiver um elemento sem margem entre dois elementos com margem de bloco, a margem também não recolherá, porque os dois elementos com margem de bloco não são mais irmãos adjacentes: eles são apenas irmãos.

Na lição sobre layout, você aprendeu que os contêineres flexbox e grid são muito parecidos com contêineres de blocos, mas lidam com elementos filhos de maneira muito diferente. Esse também é o caso do recolhimento de margem.

Se pegarmos o exemplo original da lição e aplicarmos o flexbox com a direção da coluna, as margens são combinadas, em vez de recolhido. Isso pode gerar previsibilidade com o trabalho de layout, para que os contêineres flexbox e grid foram projetados.

O colapso da margem pode ser difícil de entender, mas entender detalhadamente como eles funcionam é muito útil, Portanto, esta explicação detalhada é altamente recomendado.

Padding

Em vez de criar espaço fora da caixa, assim como margin faz, a propriedade padding cria espaço no dentro da caixa: como o isolamento.

Caixa com setas apontando para dentro para mostrar que o padding existe dentro de uma caixa

Dependendo do modelo de box que você estiver usando, que foi abordado no lição de modelo de caixa padding também pode afetar as dimensões gerais do elemento.

A propriedade padding é uma abreviação de padding-top, padding-right, padding-bottom e padding-left. Assim como margin, padding também tem propriedades lógicas: padding-block-start, padding-inline-end, padding-block-end e padding-inline-start.

Posicionamento

Também abordado no módulo layout, Se você definir um valor para position diferente de static, é possível espaçar elementos com as propriedades top, right, bottom e left. Há algumas diferenças em como esses valores direcionais se comportam:

  • Um elemento com position: relative vai continuar no mesmo lugar no fluxo do documento. mesmo quando você define esses valores. Eles também serão relativos à posição do seu elemento.
  • Um elemento com position: absolute vai basear os valores direcionais da posição do pai relativo.
  • Um elemento com position: fixed vai basear os valores direcionais na janela de visualização.
  • Um elemento com position: sticky só aplicará os valores direcionais quando estiver no estado ancorado/preso.

No módulo de propriedades lógicas, você vai conhecer as propriedades inset-block e inset-inline, que permitem definir valores direcionais que respeitam o modo de escrita.

As duas propriedades são abreviações que combinam os valores start e end. e, assim, aceitam um valor a ser definido para start e end ou dois valores individuais.

Grid e flexbox

Por fim, tanto na grade quanto no flexbox, é possível usar a propriedade gap para criar espaço entre elementos filhos. A propriedade gap é uma abreviação de row-gap e column-gap. ela aceita um ou dois valores, que podem ser comprimentos ou porcentagens. Você também pode usar palavras-chave como unset, initial e inherit. Se você definir apenas um valor, o mesmo gap será aplicado às linhas e colunas, mas se você definir os dois valores, o primeiro valor é row-gap e o segundo é column-gap.

Com flexbox e grade, você também pode criar espaço usando seus recursos de distribuição e alinhamento, que abordamos no módulo de grade e módulo flexbox.

Um diagrama de representação de uma grade com lacunas

Criar espaçamento consistente

É uma boa ideia escolher e manter sua estratégia para ajudá-lo a criar uma interface de usuário consistente que tenha bom fluxo e ritmo. Uma boa maneira de conseguir isso é usar medidas consistentes para o espaçamento.

Por exemplo, você pode se comprometer a usar 20px como uma medida consistente para todas as lacunas entre elementos, conhecidas como medianizes, então todos os layouts são consistentes. Também é possível usar 1em como o espaçamento vertical entre o conteúdo do fluxo, que teria um espaçamento consistente com base no font-size do elemento. Independente da sua escolha, salve esses valores como variáveis (ou propriedades personalizadas de CSS) para tokenizar esses valores e facilitar a consistência.

Espaçamento consistente entre elementos,
usando 20px para um layout ou 1em para um conteúdo de fluxo.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

Usar propriedades personalizadas como essa permite defini-las uma vez, e use-as em todo o CSS. Quando forem atualizados, seja localmente em um elemento ou globalmente, os valores serão transmitidos pela cascata e os valores atualizados serão refletidos.

Teste seu conhecimento

Teste seus conhecimentos sobre espaçamento

É seguro usar HTML para espaçamento quando...

Isso ajuda na compreensão do documento.
É apenas um.
É só pelo espaço.
Ninguém vai notar.

Para criar espaço dentro de uma caixa, use...

Gap
Padding
HTML
Margem

Para criar um espaço fora de uma caixa, use...

Margem
Padding
Gap
HTML

Para criar espaço entre as caixas, use...

Margem
HTML
Padding
Gap