The box model · O modelo de caixa
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
English
Every box has layers
- CSS treats every element as a box.
- Content is your text or image. Padding is space inside, around the content.
- Border is a line around the padding. Margin is space outside, pushing other boxes away.
Português
Toda caixa tem camadas
- CSS trata cada elemento como uma caixa.
- Conteúdo é seu texto ou imagem. Padding (espaço interno) é espaço dentro, ao redor do conteúdo.
- Border (borda) é uma linha ao redor do padding. Margin (margem) é espaço fora, afastando outras caixas.
English
Padding and border
padding: 20px;adds 20 pixels of space inside, on all four sides.border: 2px solid black;draws a line — its width, style, then colour.- Padding makes a box feel roomy; a border makes it stand out.
Português
Padding e border
padding: 20px;adiciona 20 pixels de espaço interno, em todos os quatro lados.border: 2px solid black;desenha uma linha — sua largura, estilo, depois cor.- Padding faz uma caixa parecer espaçosa; uma borda a destaca.
<style>
.card {
background-color: #eef;
padding: 16px;
border: 2px solid #88a;
}
</style>
<div class="card">A comfy padded card.</div>
English
Common mistakes
- The box model is content, then padding, then border, then margin (inside to outside).
- Padding adds space inside the border.
Português
Erros comuns
- O modelo de caixa é conteúdo, depois padding, depois border, depois margin (de dentro para fora).
- Padding adiciona espaço dentro da borda.
English
Now you try
- Padding is inside; the border sits around it.
- Add padding to a box, then a border.
Português
Agora você tenta
- Padding é interno; a borda fica ao redor dele.
- Adicione padding a uma caixa, depois uma borda.
Explore · Explorar
The CSS box model · O modelo de caixa CSS
Every box is content + padding + border + margin around it. · Toda caixa é conteúdo + padding + border + margin ao redor dela.
Give the box some breathing room inside. Add padding: 20px; to the .box rule. · Dê à caixa algum espaço interno. Adicione padding: 20px; à regra .box.
Draw a line around the box. Add border: 2px solid navy; to the .box rule — keep the three parts in that order: width, style, colour. · Desenhe uma linha ao redor da caixa. Adicione border: 2px solid navy; à regra .box — mantenha as três partes nessa ordem: width, style, colour.