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.
.png)
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.
Especificação
| Especificação | Status | Comentário |
|---|---|---|
| CSS Level 2 (Revision 1) | Recommendation | Embora mais precisamente formulada, não existem mudanças práticas |
| CSS Level 1 | Recommendation |
Veja também
- Referência CSS
- CSS Key Concepts: CSS syntax, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, used and actual values. Definitions of value syntax, shorthand properties and replaced elements.
- 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