📏Propriedades CSS parte 2

margin e padding controlam o espaço externo e interno dos elementos, respectivamente. border-radius arredonda os cantos dos elementos.

Introdução

Imagine que você está organizando móveis em uma sala e quer garantir que todos os móveis fiquem a uma certa distância das paredes e uns dos outros. Em programação, especialmente em CSS, nós fazemos algo parecido ao usar margens e espaçamento interno (padding) para controlar o espaço ao redor dos elementos em uma página web.

Margens (margin)

O que é? Imagine que você está organizando os móveis em uma sala. margin é o espaço que você deixa entre um móvel e outro, ou entre o móvel e a parede. Esse espaço fica do lado de fora do móvel (ou elemento, no caso do CSS).

Especificando lados específicos

• margin-top: Define o espaço acima do elemento.

  • Exemplo:

    div {
        margin-top: 20px; /* Deixa 20px de espaço acima do elemento */
    }

• margin-right: Define o espaço à direita do elemento.

  • Exemplo:

    div {
        margin-right: 20px; /* Deixa 20px de espaço à direita do elemento */
    }

• margin-bottom: Define o espaço abaixo do elemento.

  • Exemplo:

    div {
        margin-bottom: 20px; /* Deixa 20px de espaço abaixo do elemento */
    }

• margin-left: Define o espaço à esquerda do elemento.

  • Exemplo:

    div {
        margin-left: 20px; /* Deixa 20px de espaço à esquerda do elemento */
    }

Aplicando a todos os lados ao mesmo tempo

Quando você quer aplicar o mesmo valor de margem em todos os lados (cima, direita, baixo, esquerda) de um elemento, você pode usar a propriedade margin sem especificar o lado.

• Exemplo:

  div {
      margin: 20px; /* Aplica 20px de margem em todos os lados */
  }

Se você quiser definir margens diferentes para cada lado, mas ainda usar uma só linha de código, pode fazer isso fornecendo quatro valores:

• Exemplo:

  div {
      margin: 10px 20px 30px 40px;
      /* Aplica:
         10px no topo,
         20px à direita,
         30px na parte inferior,
         40px à esquerda
      */
  }

Espaçamento Interno (padding)

O que é? Pense no padding como o acolchoado dentro de uma caixa que protege um objeto frágil. Ele cria um espaço entre o conteúdo (como texto ou imagens) e as bordas do elemento. Esse espaço fica do lado de dentro das bordas do elemento.

Especificando Lados Específicos

• padding-top: Define o espaço interno no topo do elemento.

  • Exemplo:

    div {
        padding-top: 10px; /* Deixa 10px de espaço interno no topo */
    }

• padding-right: Define o espaço interno à direita do elemento.

  • Exemplo:

    div {
        padding-right: 10px; /* Deixa 10px de espaço interno à direita */
    }

• padding-bottom: Define o espaço interno na parte inferior do elemento.

  • Exemplo:

    div {
        padding-bottom: 10px; /* Deixa 10px de espaço interno na parte inferior */
    }

• padding-left: Define o espaço interno à esquerda do elemento.

  • Exemplo:

    div {
        padding-left: 10px; /* Deixa 10px de espaço interno à esquerda */
    }

Aplicando a Todos os Lados ao Mesmo Tempo

Assim como a margem, você pode aplicar o padding em todos os lados de uma vez.

• Exemplo:

  div {
      padding: 10px; /* Aplica 10px de espaço interno em todos os lados */
  }

Para definir padding diferente para cada lado usando uma única linha, você pode fazer assim:

• Exemplo:

  div {
      padding: 5px 10px 15px 20px;
      /* Aplica:
         5px no topo,
         10px à direita,
         15px na parte inferior,
         20px à esquerda
      */
  }

Bordas Arredondadas (border-radius)

O que é? Bordas arredondadas suavizam os cantos de um elemento, tornando-o mais moderno e visualmente agradável.

• Exemplo:

  div {
      width: 100px;
      height: 100px;
      background-color: green;
      border-radius: 10px; /* Arredonda os cantos em 10px */
  }

Conclusão

• Margens (margin): Controlam o espaço externo ao redor de um elemento. Podem ser aplicadas de maneira específica para cada lado (margin-top, margin-right, etc.) ou de uma vez só para todos os lados (margin).

• Espaçamento Interno (padding): Adiciona espaço dentro de um elemento, entre o conteúdo e as bordas. Assim como as margens, pode ser aplicado individualmente ou de uma vez só.

• Bordas Arredondadas (border-radius): Arredondam os cantos de um elemento, dando um toque mais suave ao design.