A marginpropriedade define a parte mais externa do modelo de caixa, criando espaço ao redor de um elemento, fora de quaisquer bordas definidas.
As margens são definidas usando comprimentos, porcentagens ou a palavra-chave autoe podem ter valores negativos. Aqui está um exemplo:
.box ( margin: 0 3em 0 3em; )margin é uma propriedade abreviada e aceita até quatro valores, mostrados aqui:
.box ( margin: || || || )Se menos de quatro valores forem definidos, os valores ausentes são assumidos com base nos que estão definidos. Por exemplo, os dois conjuntos de regras a seguir obteriam resultados idênticos:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Portanto, se apenas um valor for definido, isso configura todas as quatro margens com o mesmo valor. Se três valores forem declarados, é margin: (top) (left-and-right) (bottom);.
Qualquer uma das margens individuais pode ser declarada à mão, caso em que você definiria apenas um valor por propriedade:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto e centrando
Cada uma das propriedades de margem também pode aceitar um valor de auto. Um valor de autobasicamente diz ao navegador para definir a margem para você. Na maioria dos casos, um valor de autoserá equivalente a um valor de 0(que é o valor inicial para cada propriedade de margem) ou então qualquer espaço disponível naquele lado do elemento. No entanto, autoé útil para centralização horizontal:
.container ( width: 980px; margin: 0 auto; )Neste exemplo, duas coisas são feitas para centralizar este elemento horizontalmente dentro do espaço disponível:
- O elemento recebe uma largura especificada
- As margens esquerda e direita são definidas para
auto
Sem a largura especificada, os autovalores essencialmente não teriam efeito, configurando as margens esquerda e direita como 0ou então para o que quer que seja o espaço disponível dentro do elemento pai.
Também deve ser apontado que autoé útil apenas para centralização horizontal e, portanto, usar autopara as margens superior e inferior não centralizará um elemento verticalmente, o que pode ser confuso para iniciantes.
Margens em colapso
As margens verticais em diferentes elementos que se tocam (portanto, não têm conteúdo, preenchimento ou bordas separando-os) serão recolhidas, formando uma única margem que é igual à maior das margens adjacentes. Isso não acontece nas margens horizontais (esquerda e direita), apenas na vertical (superior e inferior).
Para ilustrar, pegue o seguinte HTML:
Collapsing Margins
Example text.E o seguinte CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )Neste exemplo, o h2elemento recebe uma margem inferior de 20 px. O elemento de parágrafo, que o segue imediatamente na fonte, tem uma margem superior definida em 10px.
O bom senso parece sugerir que a espessura da margem vertical entre o h2e o parágrafo seria um total de 30px (20px + 10px). Mas, devido ao colapso da margem, a espessura real acaba sendo 20px. Isso é demonstrado na caneta embutida abaixo:
Embora as margens em colapso possam parecer não intuitivas à primeira vista, elas são realmente úteis por alguns motivos. Primeiro, eles evitam que elementos vazios adicionem espaço de margem vertical extra, geralmente indesejável.
Em segundo lugar, eles permitem uma abordagem mais consistente para declarar margens universais nos elementos da página. Por exemplo, os títulos geralmente têm espaço de margem vertical, assim como os parágrafos. Se as margens não caíssem, os títulos que seguem os parágrafos (ou vice-versa) muitas vezes exigiriam a redefinição das margens em um dos elementos para obter um espaçamento vertical consistente.
Terceiro, o colapso da margem também se aplica a elementos aninhados. Olhe para a seguinte caneta:
Aqui, o elemento de parágrafo tem uma margem superior definida em 30px e está aninhado dentro de um divelemento com uma margem superior de 40px. Além disso, o h2elemento tem uma margem inferior de 20 px.
Mais uma vez, o bom senso sugere que o espaço total da margem vertical aqui seria de 90px (20px + 40px + 30px), mas, em vez disso, todas as margens caem em uma única margem de 40px (a maior das três). Isso é útil na maioria dos casos, pois não há necessidade de redefinir nenhuma das margens superiores para remover o espaço vertical extra.
Margens Negativas
Como você pode suspeitar, enquanto um valor de margem positiva afasta outros elementos, uma margem negativa puxará o próprio elemento naquela direção ou puxará outros elementos em sua direção.
Aqui está um exemplo de contêiner com preenchimento, e o cabeçalho h2 tem margens negativas puxando-se através desse preenchimento de volta às bordas:
Consulte o
Caso de uso mais comum da caneta para margens negativas, de Chris Coyier (@chriscoyier)
no CodePen.
Aqui está um exemplo em que o primeiro parágrafo tem uma margem inferior negativa, que puxa o próximo parágrafo para cima.
Veja o
parágrafo inferior puxando a margem negativa da caneta por Chris Coyier (@chriscoyier)
no CodePen.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | Funciona | Funciona | Funciona | Funciona | Funciona |
O IE6 está sujeito ao bug da margem flutuante dobrada, que pode ser resolvido na maioria dos casos adicionando display: inlineao elemento flutuante.