Aula interativa: margin, padding, border

Esta aula é focada na prática.

Você já aprendeu que todo elemento é uma caixa. Agora você vai mudar o espaço dentro da caixa, o espaço fora da caixa e a linha ao redor da caixa.

O que você vai praticar

• margin cria espaço fora do elemento.
• padding cria espaço dentro do elemento.
• border desenha uma linha ao redor do padding e do conteúdo.
• border-radius arredonda os cantos da caixa.
• border-style muda o tipo da linha.

Experimente o playground interativo

Use os campos numéricos para mudar valores em pixels. Use o menu suspenso para testar cada estilo de borda.

Observe a caixa de prévia e o código CSS abaixo dela. Cada controle altera uma declaração CSS.

.preview-box {
  margin: 24px;
  padding: 24px;
  border: 4px solid #2563eb;
  border-radius: 12px;
}