📦 Margin, Border e Padding CSS

Introdução

Margin, Border e Padding são propriedades fundamentais do Box Model CSS.

Elas controlam o espaçamento externo, a borda e o espaçamento interno dos elementos HTML.

Estrutura do Box Model

MARGIN

┌───────────────────────┐

│       BORDER          │

│  ┌─────────────────┐  │

│  │    PADDING      │  │

│  │ ┌─────────────┐ │  │

│  │ │  CONTENT    │ │  │

│  │ └─────────────┘ │  │

│  └─────────────────┘  │

└───────────────────────┘

Margin - Espaço Externo

A propriedade margin define o espaço entre um elemento e outros elementos ao redor.

.caixa {

margin:20px;

}

Valores Individuais de Margin

margin-top:10px;

margin-right:20px;

margin-bottom:30px;

margin-left:40px;

Shorthand Margin

Podemos definir todos os lados em uma única propriedade.

margin:10px 20px 30px 40px;

Centralização com Margin Auto

Muito utilizado para centralizar elementos.

.container {

width:800px;

margin:auto;

}

Padding - Espaço Interno

Padding controla a distância entre o conteúdo e a borda.

.caixa {

padding:20px;

}

Valores Individuais de Padding

padding-top:10px;

padding-right:20px;

padding-bottom:10px;

padding-left:20px;

Shorthand Padding

padding:10px 20px;

Define 10px em cima e embaixo e 20px nas laterais.

Border - Borda

Border cria uma linha ao redor do elemento.

.caixa {

border:2px solid black;

}

Estrutura da Border

border:

largura

tipo

cor;

Exemplo:

border:5px solid blue;

Tipos de Border

Bordas Individuais

border-top:2px solid red;

border-right:2px solid blue;

border-bottom:2px solid green;

border-left:2px solid black;

Bordas Arredondadas

Utilizamos border-radius.

.caixa {

border-radius:15px;

}

Comparação entre Propriedades

Exemplo Completo

.card {

margin:30px;

padding:20px;

border:1px solid #333;

border-radius:10px;

}

Esse padrão é muito utilizado em cards de sistemas e sites.

Aplicação em Componentes

Boas Práticas

• Utilizar espaçamentos consistentes.
• Evitar excesso de bordas.
• Usar unidades responsivas.
• Manter organização do CSS.
• Planejar o layout antes de estilizar.

Erros Comuns

Resumo Final