$cat~/glossario/box-model.md

Box Model

CSS

Modelo content + padding + border + margin de cada elemento.

box-model.mdmarkdown
01

seção

Explicação

Box Model — Modelo content + padding + border + margin de cada elemento.

content + padding + border + marginbox-sizing: border-box width includes padding border.

Margin collapse vertical adjacent blocks.

02

seção

Exemplo

snippetcss
.card {  box-sizing: border-box;  width: 100%;  padding: 1rem;  border: 1px solid #ccc;}
03

seção

Modo de uso

  • Layout predictable width

  • Spacing system margin padding tokens

  • Reset border-box global

04

seção

Armadilhas comuns

  • Content-box full width + padding overflow

  • Margin collapse surprise spacing

05

seção

Termos relacionados