Box model

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 (en-US), max-width, height, min-height e max-height (en-US) 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 (en-US), padding-right (en-US), padding-bottom (en-US), 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 (en-US) ou pela propriedade border (en-US).

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 (en-US), margin-bottom, margin-left (en-US) e na forma generalizada margin.

Quando ocorre um colapso de margens (en-US), 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 (en-US), mesmo que a borda e o padding aparecerem visualmente em torno do conteúdo.

• Referência CSS
• Propriedades CSS relacionadas: box-sizing, background-clip, height, max-height (en-US), min-height, width, max-height (en-US), min-height, padding, padding-top (en-US), padding-right (en-US), padding-bottom (en-US), padding-left, border (en-US), border-top (en-US), border-right (en-US), border-bottom (en-US), border-left, border-width (en-US), border-top-width (en-US), border-right-width (en-US), border-bottom-width (en-US), border-left-width (en-US), margin, margin-top, margin-right (en-US), margin-bottom, margin-left (en-US)