Espaçamento

Podcast do CSS - 013: 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?

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 © no seu arquivo HTML, ele será convertido em um caractere ©. A entidade   é 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.

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

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.

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.

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.

: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