Compreendendo Largura, Altura, Margem e Preenchimento

Todo elemento HTML é renderizado como uma caixa retangular. O modelo de caixa do CSS descreve as quatro camadas que compõem essa caixa, de dentro para fora: conteúdo → preenchimento interno → borda → margem.

width e height definem as dimensões da área de conteúdo. Por padrão, o preenchimento interno e a borda são adicionados a esse tamanho.

padding é o espaço transparente dentro da borda, entre o conteúdo e a extremidade da borda. Ele faz parte da área clicável e pintada pelo plano de fundo do elemento.

Cada lado pode ser definido individualmente:

margin é o espaço transparente fora da borda. Ele afasta os outros elementos. Margens negativas aproximam os elementos ou fazem com que eles se sobreponham.

As margens verticais sofrem colapso entre elementos de bloco adjacentes: o espaço real é igual à maior das duas margens, não à soma delas. As margens horizontais nunca sofrem colapso.

O colapso de margens é impedido quando:

• Os elementos são filhos de contêineres flexíveis ou de grade
• Um elemento pai tem overflow: hidden
• Um elemento pai tem padding entre ele e o primeiro filho
• Um elemento em linha separa os elementos irmãos

Definir margens horizontais como auto em um elemento de bloco com largura fixa centraliza-o dentro do contêiner. Essa é a técnica clássica de centralização.

Restrinja as dimensões com limites mínimo e máximo para manter os elementos legíveis em diferentes tamanhos de tela:

No modelo padrão content-box, largura total = width + padding-left + padding-right + border-left + border-right. Isso pode ser surpreendente e é por isso que border-box é preferível.

O CSS moderno oferece equivalentes lógicos: margin-block, margin-inline, padding-block-start etc. Eles se adaptam automaticamente à direção da escrita.

Quais camadas estão incluídas na largura total renderizada de um elemento de bloco no modelo de caixa padrão?

As camadas do modelo de caixa são conteúdo, preenchimento interno, borda e margem. O preenchimento interno fica dentro da borda; a margem fica fora. As margens verticais sofrem colapso entre elementos irmãos adjacentes. Use margin: 0 auto com uma largura fixa para centralizar elementos de bloco.