Margem do CSS

A margem deste elemento é de 70px.

Experimente você mesmo

Margem do CSS

CSS margem A propriedade é usada para criar espaço ao redor do elemento fora de qualquer borda definida.

Através do CSS, você pode controlar completamente a margem. Existem algumas propriedades que podem ser usadas para definir a margem de cada lado (superior, direito, inferior e esquerda) do elemento.

Margin - Margem de lado

CSS possui propriedades para especificar a margem de cada lado do elemento:

  • margem-superior
  • margem-direita
  • margem-inferior
  • margem-esquerda

Todas as propriedades de margem podem ser configuradas com os seguintes valores:

  • auto - O navegador calcula a margem
  • length - Especifica a margem com unidades como px, pt, cm, etc.
  • % - Especifica a margem como uma porcentagem da largura do elemento contido
  • inherit - Especifica que a margem deve ser herdada do elemento pai

Dica:Permite valores negativos.

Exemplo

Defina diferentes margens para todos os quatro lados do elemento <p>:

p {
  margem-superior: 100px;
  margem-inferior: 100px;
  margem-direita: 150px;
  margem-esquerda: 80px;
}

Experimente você mesmo

Margin - Propriedade abreviada

Para reduzir o código, você pode especificar todas as propriedades de margem em um único atributo.

margem A propriedade é uma abreviação das seguintes propriedades de margem:

  • margem-superior
  • margem-direita
  • margem-inferior
  • margem-esquerda

O mecanismo de funcionamento é o seguinte:

se margem A propriedade tem quatro valores:

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

Exemplo

A propriedade de abreviação de margem define quatro valores:

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

Experimente você mesmo

se margem A propriedade define três valores:

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

Exemplo

Use a abreviação de propriedade de margem configurada para três valores:

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

Experimente você mesmo

se margem A propriedade define dois valores:

  • margem: 25px 50px;
    • A margem superior e inferior são 25px
    • A margem direita e esquerda são 50px

Exemplo

Use a abreviação de propriedade de margem configurada para dois valores:

p {
  margem: 25px 50px;
}

Experimente você mesmo

se margem A propriedade define um valor:

  • margem: 25px;
    • Todas as quatro margens laterais são 25px

Exemplo

Use a abreviação de propriedade de margem para definir um valor:

p {
  margem: 25px;
}

Experimente você mesmo

auto valor

Você pode definir a propriedade margin como auto, para que o elemento esteja no centro horizontal do seu contêiner.

Em seguida, o elemento ocupará a largura especificada e o espaço restante será distribuído uniformemente entre os limites esquerdo e direito.

Exemplo

Uso margin: auto:

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

Experimente você mesmo

Valor inherit

Este exemplo faz com que o elemento <p class="ex1"> herde a margem externa esquerda do elemento pai (<div>):

Exemplo

Uso do valor inherit:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

Experimente você mesmo

Leitura adicional

Livro extraclasse:Modelo de caixa: Margem esquerda CSS