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](/pt-BR/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model/boxmodel-(3).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` (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.

Veja também
-----------

* 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)