Box model CSS: margin vs padding, border, display | We.Inc
Arraste os controles de conteúdo, padding, border e margin e veja o box model se redesenhar, com box-sizing, colapso de margens, estilos de borda e todos os valores de display comparados ao vivo.
Todo elemento é desenhado como retângulos aninhados: o conteúdo, depois o padding (espaço dentro da borda, pintado com o fundo), depois a border, depois a margin (espaço transparente do lado de fora que afasta os vizinhos). Com box-sizing: border-box, a largura que você define inclui padding e border, o que deixa os layouts muito mais previsíveis. A propriedade display decide como as caixas se distribuem.
As quatro camadas, de dentro para fora
Camada
O que faz
Recebe o fundo?
Conteúdo
Contém texto, imagens e elementos filhos
Sim
Padding
Respiro entre o conteúdo e a borda
Sim
Border
Uma linha visível (ou nada) em volta do padding
A própria cor da borda
Margin
Espaço entre esta caixa e as vizinhas
Não, sempre transparente
Mova os quatro controles e o diagrama, o tamanho total medido e o CSS mudam juntos. Abaixo do visualizador você pode alternar o box-sizing, ver duas margens colapsarem em uma só e comparar block, inline, inline-block, flex, grid e none lado a lado nos mesmos três itens.
Defina uma largura e uma altura para a área de conteúdo, depois adicione padding, border e margin com os controles.
Alterne o box-sizing entre content-box e border-box e observe como a largura renderizada muda.
Leia a largura e a altura totais que o elemento realmente ocupa, com as margens.
Copie o CSS gerado e role para baixo para ver as demos de colapso de margem e de display.
Adicione *, *::before, *::after { box-sizing: border-box; } no topo de toda folha de estilo. A maioria dos resets e frameworks já faz isso.
Use padding quando quiser que o fundo ou a área de clique cresça, e margin quando quiser só distância entre coisas separadas.
Em um contêiner flex ou grid, prefira gap a margens nos filhos. Ele nunca se duplica nas bordas.
O outline é desenhado fora da borda e não ocupa espaço, por isso os anéis de foco usam outline e não border.
Perguntas frequentes
Qual é a diferença entre margin e padding?
O padding fica dentro da borda, então é preenchido pelo fundo do elemento e faz parte da área clicável. A margin fica fora da borda, é sempre transparente e só separa o elemento dos outros. Margens verticais entre blocos também podem colapsar, enquanto o padding nunca colapsa.
Por que meu elemento fica mais largo do que a largura que defini?
Com o padrão box-sizing: content-box, width se aplica só ao conteúdo, e padding e border são somados por cima. Uma caixa de 300px com 20px de padding e borda de 2px é renderizada com 344px de largura. Mude para box-sizing: border-box e ela fica com 300px, com o conteúdo encolhendo para caber.
Quando as margens colapsam?
As margens superior e inferior de caixas block no fluxo normal se fundem quando se tocam: entre irmãos, e entre um pai e seu primeiro ou último filho quando nenhuma borda, padding ou conteúdo inline os separa. A maior margem vence. Margens nunca colapsam dentro de contêineres flex ou grid, nem na horizontal.
Qual é a diferença entre display: none e visibility: hidden?
display: none remove o elemento do layout por completo, então o espaço se fecha e os leitores de tela o ignoram. visibility: hidden mantém o espaço reservado mas não pinta nada, e o conteúdo também fica oculto para tecnologias assistivas. opacity: 0 mantém tanto o espaço quanto a possibilidade de clicar ou focar.
Posso definir width em um elemento inline?
Não. Width, height e margens verticais são ignorados em uma caixa inline simples, como um span. O padding vertical é pintado, mas não afasta as linhas. Mude para inline-block, ou transforme o pai em um contêiner flex, e esses tamanhos passam a valer.
content-box versus border-box em números
Com content-box, a largura total é igual a width mais o padding esquerdo e direito mais a borda esquerda e direita. A margin ainda se soma por fora. Esse era o comportamento original do CSS e ainda é o padrão do navegador para a maioria dos elementos.
Com border-box, a largura que você escreve é medida até a borda externa. Padding e border ocupam a área de conteúdo em vez de aumentar a caixa, então um layout de duas colunas de 50% mais 50% fica em uma linha só, por mais padding que você adicione.
Bordas além de uma linha simples
O atalho border aceita uma largura, um estilo e uma cor em qualquer ordem. Os estilos são solid, dashed, dotted, double, groove, ridge, inset, outset, none e hidden. Uma borda com estilo none tem largura zero, seja qual for a largura escrita, o que surpreende quem define só border-width.
border-radius arredonda os cantos da borda, do fundo e do outline nos navegadores atuais. Um valor arredonda os quatro cantos; uma barra define raios horizontais e verticais separados para cantos elípticos, e 50% em um quadrado o transforma em círculo.
Como o display muda a caixa
Caixas block começam em uma nova linha e se esticam para preencher o contêiner. Caixas inline fluem dentro de uma linha de texto e ignoram width e height. inline-block flui como texto, mas aceita tamanhos e margens verticais, o que é útil para badges e botões.
flex e grid tornam o elemento um bloco por fora e um contêiner de layout por dentro. Os filhos deixam de se comportar como block ou inline e seguem as regras de flex ou grid, com gap disponível para o espaçamento. contents remove a própria caixa mantendo os filhos, mas tem um histórico de bugs de acessibilidade, então teste com um leitor de tela antes de depender dele.
Margin ou padding? Escolha pela função
Qual usar
Você quer
Use
Que a cor de fundo cubra o espaço
Uma área de toque maior em um botão
Espaço entre dois cards separados
margin, ou gap no pai
Um item empurrado para a outra ponta de uma linha flex
margin-left: auto
Um bloco de largura fixa centralizado
margin-inline: auto
Espaço que nunca colapsa com um vizinho
padding, ou gap
Colapso de margens, ao vivo
O primeiro par mostra dois irmãos cujas margens de 24px e 40px se encontram: o espaço é de 40px, não 64px. O segundo par fica em um contêiner flow-root, que impede a fusão das margens do pai e do filho, e o terceiro usa flex, onde nada colapsa.
Colapso entre irmãos e entre pai e filho
Edite as margens e observe os espaços. Adicionar padding-top: 1px à caixa externa também impede a fusão entre pai e filho.
Estilos de borda e raio
Os oito estilos de borda visíveis
groove, ridge, inset e outset sombreiam a borda para simular profundidade. Ficam melhores com 4px ou mais.
Formatos com raio: arredondado, pílula, círculo, elipse
Um raio enorme, como 999px, cria uma pílula de qualquer comprimento. 50% em um quadrado gera um círculo.
Todos os valores de display nos mesmos três itens
Valores de display comparados
Valor
Nova linha?
Width e height funcionam?
Uso típico
Tailwind
Sim
Sim
Seções, parágrafos, cards
Não
Não
Palavras dentro de uma frase
Não
Sim
Badges, botões em uma linha de texto
Sim
Sim
Linhas ou colunas de itens
Não
Sim
Um ícone e um rótulo dentro do texto
Sim
Sim
Layouts bidimensionais
Não
Sim
Um pequeno grid que fica em linha
Sim
Sim
Contém floats e margens dos filhos
Caixa removida
Sem caixa para dimensionar
Deixar os filhos entrarem no layout do pai
Removido do layout
Não renderizado
Ocultar por completo
block, inline, inline-block, flex e grid lado a lado
Cada linha contém os mesmos três spans com width: 80px e padding. Só o inline ignora a largura.
display: none vs visibility: hidden vs opacity: 0
Três formas de ocultar, comparadas
Propriedade
Mantém o espaço?
Clicável ou focável?
Lido por leitores de tela?
Aceita transição?
display: none
Não
Não
Não
Só com allow-discrete em navegadores mais novos
visibility: hidden
Sim
Não
Não
Sim, muda no fim ou no início
opacity: 0
Sim
Sim
Sim
Sim, suavemente
O item do meio oculto de três formas
Repare no espaço deixado por visibility e opacity, e no espaço fechado com display: none.
O reset de border-box
Aplicar border-box em tudo
Os pseudo-elementos estão incluídos porque também são caixas. O Preflight do Tailwind já traz essa regra.
Equivalentes no Tailwind
Utilitários de box model no Tailwind (escala de espaçamento padrão, 1 unidade = 0.25rem)
CSS
Tailwind
padding: 1rem
padding-inline: 1.5rem
margin-top: 2rem
margin-inline: auto
border-width: 1px / 2px
border / border-2
border-style: dashed
border-radius: 0.5rem
border-radius: 9999px
box-sizing: border-box / content-box
box-border / box-content
visibility: hidden
opacity: 0
Visualizador de box model
Camada de margin
Caixa renderizada (limite da borda)
Espaço ocupado, com as margens
Amarelo é a margin, a linha azul é a border, verde é o padding, azul-claro é o conteúdo.