Margens

Margens

A propriedade margin é usada para criar espaço em torno dos elementos, fora de qualquer borda definida.

Com CSS temos controle total sobre as margens. Existem propriedades para definir a margem para cada lado de um elemento.

Margem - Lados Individuais

CSS tem propriedades para especificar a margem para cada lado de um elemento:

• margin-top
• margin-right
• margin-bottom
• margin-left

Todas as propriedades de margem podem ter os seguintes valores:

• auto - o navegador calcula a margem
• length - especifica a margem em px, pt, cm, em, etc.
• % - especifica a margem em % de largura do elemento em que está contido
• inherit - especifica que a margem deve ser herdada do pai do elemento

O exemplo a seguir define diferentes margens para todos os lados de um elemento <p>:

              p {
                margin-top: 100px;
                margin-bottom: 100px;
                margin-right: 150px;
                margin-left: 80px;
              }
            

Margem - Propriedade Abreviada

Para diminuir o código, é possível especificar todas as margens em uma propriedade.

Funciona assim:

Se a propriedade margin tiver quatro valores:

• margin: 25px 50px 75px 100px;
  • margem superior é 25px
  • margem direita é 50px
  • margem inferior é 75px
  • margem esquerda é 100px

              p {
                margin: 25px 50px 75px 100px;
              }
            

Se a propriedade margin tiver três valores:

• margin: 25px 50px 75px;
  • margem superior é 25px
  • margens direita e esquerda são 50px
  • margem inferior é 75px

              p {
                margin: 25px 50px 75px;
              }
            

Se a propriedade margin tiver dois valores:

• margin: 25px 50px;
  • margens superior e inferior são 25px
  • margens direita e esquerda são 50px

              p {
                margin: 25px 50px;
              }
            

Se a propriedade margin tiver um valor:

• margin: 25px;
  • todas as margens são 25px

              p {
                margin: 25px;
              }
            

Valor auto

Podemos definir a propriedade margin para auto para centralizar horizontalmente o elemento dentro de seu container.

O elemento ocupará a largura especificada, e o espaço restante será divido igualmente entre as margens esquerda e direita:

              div {
                width: 300px;
                margin: auto;
                border: 1px solid red;
              }