Uma caixa retangular.
- Essa caixa possui propriedades de uma caixa (2D)
- 1. Tamanho (largur x altura) = width | height
- 2. Conteúdo = content
- 3. Bordas = border
- 4. Preenchimento Interno = padding
- 5. Espaços fora da caixa = margin
OBS.: Cada elemento na sua página, será considerado uma box (caixa).
Box Sizing
- Como será calculado o tamnho da caixa:
- - content-box | border-box
CSS:
div {
box-sizing: border-box;
}
Display Block & Display Inline
- - Como as caixas se comportam em relação às outras;
- - Como é o comportamento externo das caixas.
Block
- 1. Ocupa toda a linha, colocando o próximo elemento abaixo desse;
- 2. Width e height são respeitados;
- 3. Padding, margin, border vão funcionar normalmente.
Inline
- 1. Elemento um do lado do outro;
- 2. Width e height não funcionam;
- 3. Apenas valores horizontais de margin, padding e border.
- Exemplo:
- Block:
<p> <div> <section>, todos headings
<h1> <h2> ...
- Inline:
<a> <strong> <span> <em>
Margin
- Margin quer dizer espaços entre os elementos:
- - margin-top |margin-right | margin-bottom | margin-left
- - values:
<length> | <percentage> | auto
OBS.: cuidado com "margin collapsing" (margin-top se junta à margin-bottom).
Veja mais sobre margin em: Margin MDN
Padding
- Representa o preenchimento interno da caixa
- - padding-top | padding-right | padding-bottom | padding-left
- - values:
<length> | <percentage>
OBS.: Padding poderá causar diferenças na largura de um elemento.
Veja mais sobre padding em: Padding MDN
Border (e outline)
- São as bordas das caixas
- - Value:
<border-style> | <border-width> | <border-color>
- - Style: solid | dotted | dashed | double | groove | ridge | inset | outset
- - Width:
<length>
- - Color:
<color>
Outline
- Difere em 4 sentidos:
- - Não modifica o tamanho da caixa, pois é parte do Box Model;
- - Poderá ser diferente de retangulas;
- - Não permite ajuste individuais;
- - Mais usado pelo user agente para acessibilidade.
Veja mais sobre border em: Border MDN