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.

CSS Box model

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