Box model
Resumo
Em uma página WEB, cada elemento é representado como um box retangular. Determinar o tamanho, propriedades - como sua cor, fundo, estilo das bordas - e a posição desses boxes é o objetivo do mecanismo de renderização.
No CSS, cada um desses boxes retangulares é descrita usando o box model padrão. Este modelo descreve o conteúdo do espaço ocupado por um elemento. Cada box possui 4 edges: margin edge, border edge, padding edge e content edge.
A área de conteúdo (content area) é a área ocupada pelo conteúdo real do elemento. Ele frequentamente possui um fundo, uma cor de fonte ou uma imagem (nessa ordem, uma imagem opaca esconde a cor de fundo) e é localizada dentro do content edge; suas dimensões são a largura do conteúdo, ou largura do box de conteúdo, e altura do conteúdo, ou altura do box de conteúdo.
Se a propriedade CSS box-sizing
está configurada como padrão, as propriedades CSS width
, min-width
, max-width
, height
, min-height
e max-height
controlam o tamanho do conteúdo.
A área de preenchimento (padding area) estende-se para a borda em torno do enchimento. Quando a área de conteúdo tem um fundo, cor ou imagem, isso será estendido para a área de preenchimento, por esse motivo, você pode pensar o preenchimento como a extensão do conteúdo. O preenchimento está localizado dentro do padding edge, e suas dimensões são a largura do padding-box e a altura do padding-box.
O espaço entre os edges de preenchimento e conteúdo podem ser controlados utilizando as seguintes propriedades CSS padding-top
, padding-right
, padding-bottom
, padding-left
e na forma generalizada padding
.
A área de borda (border area**)** estende a área de preenchimento para a área que contém as bordas. Esta é a área de dentro do border edge, e suas dimensões são a largura e a altura do border-box. Esta área depende do tamanho da borda que está definido pela propriedade border-width
ou pela propriedade border
.
A área de margem (margin area) estende a área de borda com um espaço vazio utilizado para separar o elemento dos elementos vizinhos. Esta é a área de dentro do margin edge, e suas dimensões são a largura e a altura do margin-box.
O tamanho da área de margem é controlada utilizando as seguintes propriedades CSS margin-top
, margin-right
, margin-bottom
, margin-left
e na forma generalizada margin
.
Quando ocorre um colapso de margens, a área de margem não está claramente definida, uma vez que as margens são compartilhadas entre os boxes.
Finalmente, note que, para elementos não substituídos inline, o total de espaço ocupado (para a altura da linha) é determinado pela propriedade line-height
, mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.
Veja também
- Referência CSS
- Propriedades CSS relacionadas:
box-sizing
,background-clip
,height
,max-height
,min-height
,width
,max-height
,min-height
,padding
,padding-top
,padding-right
,padding-bottom
,padding-left
,border
,border-top
,border-right
,border-bottom
,border-left
,border-width
,border-top-width
,border-right-width
,border-bottom-width
,border-left-width
,margin
,margin-top
,margin-right
,margin-bottom
,margin-left