margin propriedade como sua própria bolha de espaço pessoal. É aquela zona tampão que você mantém entre você e as pessoas que estão ao seu redor em um show, ou a distância que você mantém de um vaso delicado e de valor inestimável em um museu. É tudo uma questão de manter uma distância saudável.
margin faz exatamente isso. Cria espaço ao redor dos elementos, fora de quaisquer bordas definidas. margin cutuca seus elementos, dando-lhes algum espaço para respirar em relação aos elementos vizinhos. É o campo de força invisível que mantém a harmonia no seu design.
Sintaxe
O margin A propriedade pode parecer simples na superfície, mas como um iceberg despretensioso, há muita coisa acontecendo abaixo da superfície. A sintaxe para o margin propriedade é:
1 |
margin: [length] | [percentage] | auto; |
A propriedade leva até quatro valores que se aplicam às margens superior, direita, inferior e esquerda, respectivamente. Se você especificar um valor, ele definirá a margem para todos os lados. Dois valores definem superior/inferior e esquerda/direita. Três valores definidos em cima, esquerda/direita e em baixo. Quatro valores definidos em cima, à direita, em baixo e à esquerda (nessa ordem).
1 |
/* All margins set to 10px */
|
2 |
margin: 10px; |
3 |
|
4 |
/* Top/bottom margins are 10px; Right/left margins are 15px */
|
5 |
margin: 10px 15px; |
6 |
|
7 |
/* Top margin is 10px; Right/left margins are 15px; Bottom margin is 5px */
|
8 |
margin: 10px 15px 5px; |
9 |
|
10 |
/* Top margin is 10px; Right margin is 15px; Bottom margin is 5px; Left margin is 20px */
|
11 |
margin: 10px 15px 5px 20px; |
-
Valor padrão: O valor padrão para o
marginpropriedade é0. -
Aplicabilidade: O
marginpropriedade pode ser aplicada a todos os elementos, exceto elementos com tipos de exibição de tabela diferentes de table-caption, table e inline-table. -
Herança: O
marginpropriedade não herda de seu elemento pai. - Animação: Sim, animações CSS podem ser aplicadas a ele. Você pode fazer os elementos dançarem uns em torno dos outros com uma coreografia de mudanças nas margens, mas lembre-se de usá-la criteriosamente para evitar uma festa caótica.
Valores de palavras-chave
Vamos dar uma olhada nos valores que você pode usar com o margin propriedade.
comprimento
O length value permite que você especifique um tamanho fixo para suas margens. A chave está na sua mão, você decide a largura da sua bolha espacial. Você poderia configurá-lo px, em, remou qualquer outra unidade de comprimento.
1 |
margin: 10px; /* A cozy personal space of 10 pixels all around */ |
percentagem
A percentage O valor baseia o tamanho da margem na largura do elemento pai. Portanto, se você estiver em um recipiente apertado, a margem se ajustará para manter a harmonia proporcional.
1 |
margin: 5%; /* The margin is 5% of the width of the containing element */ |
auto
O auto value permite que o navegador decida a margem para você. É como deixar um amigo decidir a distância que deve ficar do palco em um show de rock. Ele equilibra os espaços de uma forma que centraliza o elemento em seu pai.
1 |
margin: auto; /* Let the browser decide */ |
O
margin propriedade também aceita valores negativos!
Saber mais
Um fato fascinante e pouco conhecido sobre as margens CSS é margin collapse. Quando as margens superior e inferior de dois elementos se encontram, elas dão um high-five e se tornam um. A maior das duas sobrevive, e a margem menor simplesmente… entra em colapso. A margem resultante é igual à maior das margens adjacentes. Esta é uma peculiaridade divertida que se aplica apenas às margens verticais e não às margens horizontais (esquerda e direita).
“Compreender a mecânica do layout CSS, como o colapso das margens, é uma das etapas mais importantes para dominar o CSS” – Rachel Andrew
Tutoriais relevantes
- Noções básicas de CSS: entendendo as margens recolhidas
Especificação oficial e suporte ao navegador
