Shorthands para padding, border e margin

Você já aprendeu sobre as propriedades individuais de padding, border e margin, e como elas controlam o espaçamento interno, a linha divisória e o espaçamento externo de um elemento. Definir cada lado separadamente (padding-top, padding-right, etc.) pode ser repetitivo e tornar seu CSS muito longo.

É por isso que o CSS oferece shorthands (atalhos) para essas propriedades. As shorthands permitem que você defina os valores para todos os quatro lados (ou para múltiplas sub-propriedades no caso de border) em uma única declaração, tornando seu código mais conciso, legível e eficiente.

Pense nas shorthands como um "pedido de pizza" onde você pode especificar todos os ingredientes de uma vez, em vez de fazer um pedido separado para cada um.

Shorthand `padding`

A propriedade padding é um atalho para padding-top, padding-right, padding-bottom e padding-left.

Sintaxe e Comportamento:

Um valor: Aplica o mesmo valor para os quatro lados.

div {
  padding: 10px; /* 10px em cima, direita, baixo e esquerda */
}

Dois valores:
- O primeiro valor aplica-se ao topo e baixo.
- O segundo valor aplica-se à direita e esquerda.
```
div {
  padding: 10px 20px; /* 10px no topo/baixo, 20px na direita/esquerda */
}
```
Três valores:
- O primeiro valor aplica-se ao topo.
- O segundo valor aplica-se à direita e esquerda.
- O terceiro valor aplica-se ao baixo.
```
div {
  padding: 5px 10px 15px; /* 5px no topo, 10px na direita/esquerda, 15px no baixo */
}
```
Quatro valores: Os valores aplicam-se na ordem topo, direita, baixo, esquerda (sentido horário, começando pelo topo).
```
div {
  padding: 5px 10px 15px 20px; /* 5px topo, 10px direita, 15px baixo, 20px esquerda */
}
```

Shorthand `margin`

A propriedade margin é um atalho para margin-top, margin-right, margin-bottom e margin-left. Seu comportamento é idêntico ao da shorthand padding.

Sintaxe e Comportamento:

Um valor: Aplica o mesmo valor para os quatro lados.

div {
  margin: 15px; /* 15px em cima, direita, baixo e esquerda */
}

Dois valores:
- O primeiro valor aplica-se ao topo e baixo.
- O segundo valor aplica-se à direita e esquerda.
```
div {
  margin: 15px 25px; /* 15px no topo/baixo, 25px na direita/esquerda */
}
```
Três valores:
- O primeiro valor aplica-se ao topo.
- O segundo valor aplica-se à direita e esquerda.
- O terceiro valor aplica-se ao baixo.
```
div {
  margin: 10px 20px 30px; /* 10px no topo, 20px na direita/esquerda, 30px no baixo */
}
```
Quatro valores: Os valores aplicam-se na ordem topo, direita, baixo, esquerda (sentido horário, começando pelo topo).
```
div {
  margin: 10px 15px 20px 25px; /* 10px topo, 15px direita, 20px baixo, 25px esquerda */
}
```

Shorthand `border`

A propriedade border é um atalho para border-width, border-style e border-color.

Sintaxe e Comportamento:

Define a espessura, o estilo e a cor da borda em uma única declaração. A ordem dos valores é espessura, estilo, cor.
```
div {
  border: 2px solid red; /* 2px de espessura, estilo sólido, cor vermelha */
}
```

Importante: Se você omitir um dos valores (ex: border: 2px solid;), o navegador usará o valor padrão para o que foi omitido (a cor padrão da borda é a cor do texto).

Shorthands para Lados Específicos da Borda

Você também pode usar shorthands para definir a borda de um lado específico:

border-top: Define border-top-width, border-top-style, border-top-color.
- Exemplo: border-top: 1px dashed blue;
border-right: Define border-right-width, border-right-style, border-right-color.
border-bottom: Define border-bottom-width, border-bottom-style, border-bottom-color.
border-left: Define border-left-width, border-left-style, border-left-color.

Exemplo Prático:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Shorthands Box Model</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f4f4f4;
    }

    .box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      text-align: center;
      line-height: 100px;
      color: #333;
      font-weight: bold;
      margin-bottom: 20px; /* Espaçamento entre as caixas */
    }

    .box-padding-1 {
      padding: 20px; /* Todos os lados */
      background-color: lightgreen;
    }

    .box-padding-2 {
      padding: 10px 30px; /* Topo/Baixo, Direita/Esquerda */
      background-color: lightcoral;
    }

    .box-padding-3 {
      padding: 5px 15px 25px; /* Topo, Direita/Esquerda, Baixo */
      background-color: lightgoldenrodyellow;
    }

    .box-padding-4 {
      padding: 5px 10px 15px 20px; /* Topo, Direita, Baixo, Esquerda */
      background-color: lightgray;
    }

    .box-margin-1 {
      margin: 30px; /* Todos os lados */
      background-color: #a0e0a0;
    }

    .box-margin-2 {
      margin: 15px 40px; /* Topo/Baixo, Direita/Esquerda */
      background-color: #e0a0a0;
    }

    .box-border-shorthand {
      border: 3px dashed purple; /* Espessura, Estilo, Cor */
      background-color: #c0c0ff;
    }

    .box-border-top-shorthand {
      border: 1px solid black; /* Borda padrão para os outros lados */
      border-top: 5px double orange; /* Sobrescreve apenas o topo */
      background-color: #ffe0b2;
    }
  </style>
</head>
<body>
  <div class="box box-padding-1">
    Padding: 20px
  </div>

  <div class="box box-padding-2">
    Padding: 10px 30px
  </div>

  <div class="box box-padding-3">
    Padding: 5px 15px 25px
  </div>

  <div class="box box-padding-4">
    Padding: 5px 10px 15px 20px
  </div>

  <div class="box box-margin-1">
    Margin: 30px
  </div>

  <div class="box box-margin-2">
    Margin: 15px 40px
  </div>

  <div class="box box-border-shorthand">
    Border: 3px dashed purple
  </div>

  <div class="box box-border-top-shorthand">
    Border-top: 5px double orange
  </div>
</body>
</html>

Resultado: Inspecione cada caixa com as ferramentas de desenvolvedor para ver como as shorthands aplicam os valores e como o código fica mais limpo.

Boas Práticas:

Consistência e Clareza: Use shorthands para manter seu CSS conciso e fácil de ler.
Sobrescrita: Lembre-se que as shorthands podem sobrescrever propriedades individuais. Se você definir border-top-width: 5px; e depois border: 1px solid black;, a borda superior voltará a ser 1px solid black;. A última declaração CSS que o navegador lê é a que prevalece.
Valores Padrão: Se você omitir um valor na shorthand border, ele assumirá o valor padrão. Por exemplo, border: 2px solid; usará a cor do texto como cor da borda.
Flexibilidade: Embora as shorthands sejam ótimas, use as propriedades individuais quando precisar de controle muito específico sobre um único lado ou sub-propriedade sem afetar os outros.

Dominar as shorthands para padding, border e margin é um passo importante para escrever CSS de forma mais profissional e eficiente, economizando tempo e mantendo seu código organizado.

Shorthand padding

Shorthand margin

Shorthand border

Shorthands para Lados Específicos da Borda

Exemplo Prático:

Boas Práticas:

Shorthand `padding`

Shorthand `margin`

Shorthand `border`