Spacing — margin and padding · Espaçamento — margin e padding
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
Space between boxes
- Margin is the space outside a box — the gap to its neighbours.
margin: 30px;adds 30 pixels on all four sides, outside the border.- Padding pushes the content in; margin pushes other boxes away.
Português
Espaço entre caixas
- Margin é o espaço fora de uma caixa — a lacuna até seus vizinhos.
margin: 30px;adiciona 30 pixels em todos os quatro lados, fora da borda.- Padding empurra o conteúdo para dentro; margin empurra outras caixas para longe.
English
One side at a time
- You can space just one side:
margin-top,margin-right,margin-bottom,margin-left. - The same works for padding:
padding-left: 10px;, and so on. margin-bottomunder a heading neatly separates it from the text.
Português
Um lado de cada vez
- Você pode espaçar apenas um lado:
margin-top,margin-right,margin-bottom,margin-left. - O mesmo funciona para padding:
padding-left: 10px;, e assim por diante. margin-bottomabaixo de um cabeçalho separa-o limpo do texto.
<style>
.tag {
background-color: gold;
padding: 6px;
margin-right: 8px;
}
</style>
<span class="tag">news</span>
<span class="tag">sport</span>
English
Common mistakes
- Padding is inside the border; margin is the space outside it.
box-sizing: border-boxmakes the width include padding and border.
Português
Erros comuns
- Padding é dentro da borda; margin é o espaço fora dela.
box-sizing: border-boxfaz a largura incluir padding e border.
English
Now you try
- Margin is the gap between boxes; padding is the space inside one.
- Add margin around a box, then space below a heading.
Português
Agora você tenta
- Margin é a lacuna entre caixas; padding é o espaço dentro de uma.
- Adicione margem ao redor de uma caixa, depois espaço abaixo de um cabeçalho.
Explore · Explorar
margin vs padding
Padding is space inside the border; margin · margem is space outside. · Padding é espaço dentro da borda; margin · margem é espaço fora.
Push the boxes apart from each other. Add margin: 30px; to the .box rule. · Empurre as caixas umas das outras. Adicione margin: 30px; à regra .box.
Add space below the heading only. Add h1 { margin-bottom: 24px; }. · Adicione espaço abaixo apenas do cabeçalho. Adicione h1 { margin-bottom: 24px; }.