Modelo de caixa: Margem CSS

O espaço em branco ao redor da borda do elemento é a margem. Definir margem cria um espaço adicional 'em branco' ao redor do elemento.

A maneira mais simples de definir margem é usar a propriedade margin, que aceita qualquer unidade de comprimento, valores percentuais e até mesmo valores negativos.

Propriedade margin CSS

A maneira mais simples de definir margem é usar Propriedade margin.

A propriedade margin aceita qualquer unidade de comprimento, seja pixel, polegada, milímetro ou em.

A propriedade margin pode ser configurada como auto. A prática mais comum é definir valores de comprimento para as margens. A declaração a seguir define um espaço de 1/4 polegada em cada lado do elemento h1:

h1 {margem: 0,25in;}

O exemplo a seguir define diferentes margens externas para os quatro lados do elemento h1, usando a unidade de comprimento pixel (px):

h1 {margem: 10px 0px 15px 5px;}

Da mesma forma que a configuração da margem interna, a ordem desses valores começa com a margem superior (topo) e gira em torno do elemento no sentido horário:

margem: topo direita inferior esquerda

Além disso, você também pode definir um valor percentual para a margem:

p {margem: 10%;}

Os porcentagens são calculados em relação ao width do elemento pai. No exemplo acima, a margem do elemento p é 10% do width do elemento pai.

O valor padrão de margem é 0, então se nenhum valor for declarado para margin, não haverá margem. No entanto, na prática, os navegadores já fornecem estilos pré-definidos para muitos elementos, incluindo a margem. Por exemplo, em navegadores que suportam CSS, a margem cria 'linhas vazias' acima e abaixo de cada elemento do tipo parágrafo. Portanto, se não for declarada margem para o elemento p, o navegador pode aplicar uma margem automaticamente. Claro, se você fizer uma declaração específica, ela substituirá o estilo padrão.

Copia de valores

Lembra-se? Nós mencionamos a cópia de valores nas duas primeiras seções. Vamos explicar como usar a cópia de valores agora.

Às vezes, podemos inserir alguns valores repetidos:

p {margem: 0.5em 1em 0.5em 1em;}

Através da cópia de valores, você não precisa repetidamente inserir esses números. As regras acima são equivalentes às seguintes regras:

p {margem: 0.5em 1em;}

Esses dois valores podem substituir os 4 valores anteriores. Como isso é feito? O CSS define algumas regras que permitem especificar menos de 4 valores para a margem. As regras são as seguintes:

  • Se o valor da margem esquerda estiver ausente, use o valor da margem direita.
  • Se o valor da margem inferior estiver ausente, use o valor da margem superior.
  • Se o valor da margem direita estiver ausente, use o valor da margem superior.

A figura a seguir fornece uma maneira mais intuitiva de entender isso:

Copia de valores CSS

Por outro lado, se 3 valores forem especificados para a margem, o quarto valor (ou seja, a margem esquerda) será copiado do segundo valor (margem direita). Se dois valores forem fornecidos, o quarto valor será copiado do segundo valor, e o terceiro valor (margem inferior) será copiado do primeiro valor (margem superior). No último caso, se apenas um valor for especificado, os outros 3 margens serão copiados deste valor (margem superior).

Utilize este mecanismo simples, você precisa especificar apenas os valores necessários, e não todos os 4 valores, por exemplo:

h1 {margem: 0.25em 1em 0.5em;}	/* Equivalente a 0.25em 1em 0.5em 1em */
h2 {margem: 0.5em 1em;}		/* Equivalente a 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* equivalente a 1px 1px 1px 1px */

Esse método tem uma pequena desvantagem, você肯定会遇到这个问题。Suponha que você queira definir a margem superior e a margem esquerda do elemento p como 20 pixels, e a margem inferior e a margem direita como 30 pixels. Nesse caso, você deve escrever:

p {margin: 20px 30px 30px 20px;}

Dessa forma, você pode obter o resultado desejado. Infelizmente, nesse caso, não há maneira de reduzir o número de valores necessários.

Vamos olhar para outro exemplo. Se você quiser que todas as margens exceto a margem esquerda sejam auto (a margem esquerda é 20px):

p {margin: auto auto auto 20px;}

Da mesma forma, você pode obter o efeito desejado. O problema é que digitar esses auto pode ser um pouco complicado. Se você só quiser controlar a margem unilateral de um elemento, use propriedades de margem unilateral.

Propriedades de margem unilateral

Você pode usar propriedades de margem unilaterais para definir valores de margem unilaterais para elementos. Suponha que você queira definir a margem esquerda do elemento p como 20px. Não é necessário usar margin (precisa digitar muitos auto), mas pode usar o seguinte método:

p {margin-left: 20px;}

Você pode usar qualquer uma das seguintes propriedades para definir a margem superior correspondente sem afetar todas as outras margens:

Você pode usar várias dessas propriedades unilaterais em uma regra, por exemplo:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

Claro, para esse caso, usar margin pode ser mais fácil:

p {margin: 20px 30px 30px 20px;}

Independentemente de usar propriedades unilaterais ou margin, o resultado é o mesmo. Geralmente, se você quiser definir margem para várias laterais, usar margin é mais fácil. No entanto, do ponto de vista da exibição do documento, na verdade não importa qual método usar, então você deve escolher o método que é mais fácil para você.

Dicas e comentários

Dica:Netscape e IE definem o valor padrão de margem (margin) para a tag body como 8px. O Opera não é assim. Pelo contrário, o Opera define o valor padrão de preenchimento interno (padding) como 8px, então se você quiser ajustar a margem de toda a parte externa do site e mostrá-la corretamente no Opera, é necessário personalizar a margem do body.

Exemplo de margem externa CSS:

Definir a margem esquerda externa do texto
Este exemplo demonstra como definir a margem esquerda do texto.
Definir a margem direita do texto
Este exemplo demonstra como definir a margem direita do texto.
Definir a margem superior do texto
Este exemplo demonstra como definir a margem superior do texto.
Definir a margem inferior do texto
Este exemplo demonstra como definir a margem inferior do texto.
Todas as propriedades de margem em uma declaração.
Este exemplo demonstra como definir todas as propriedades de margem em uma declaração.

Propriedade de margem CSS

Atributo Descrição
margin Atributo abreviado. Definir todas as propriedades de margem em uma declaração.
margin-bottom Definir a margem externa inferior do elemento.
margin-left Definir a margem externa esquerda do elemento.
margin-right Definir a margem externa direita do elemento.
margin-top Definir a margem superior externa do elemento.