CSS Margin Propriedades
As CSS margin propriedades são usadas para gerar espaço em torno de elementos.
As margin propriedades definir o tamanho do espaço em branco fora da fronteira.
Este elemento tem uma margin de 80px.
CSS Margins
As CSS margin propriedades definir o tamanho do espaço em branco fora da fronteira.
 | Nota: As margins são completamente transparentes - e não pode ter uma cor de fundo! |
|---|
Com CSS, você tem total controle sobre as margins . Há propriedades CSS para definir a margin para cada lado de um elemento (em cima, à direita, inferior e esquerda).
Margin - Sides individuais
CSS tem propriedades para especificar a margin de cada lado de um elemento:
-
margin-top -
margin-right -
margin-bottom -
margin-left
Todas as margin propriedades podem ter os seguintes valores:
- auto - o navegador calcula a margin
- comprimento - especifica uma margin em px, pt, cm , etc.
- % - Especifica uma margin em% da largura do elemento contendo
- herdar - especifica que a margin deve ser herdado do elemento pai
| Nota: É também possível utilizar os valores negativos para margins ;a sobrepor-se o conteúdo. |
|---|
O exemplo a seguir define diferentes margins para todos os quatro lados de um <p> elemento:
Exemplo
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
} Tente você mesmo " O exemplo a seguir permite que a esquerda margin ser herdado do elemento pai:
Exemplo
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left:
inherit;
} Tente você mesmo " Margin - Propriedade Taquigrafia
Para encurtar o código, é possível especificar todas as margin propriedades em uma propriedade.
A margin propriedade é um atalho para as seguintes individuais margin propriedades:
-
margin-top -
margin-right -
margin-bottom -
margin-left
Então, aqui está como funciona:
Se a margin propriedade tem quatro valores:
- margin : 25px 50px 75px 100px;
- margem superior é 25px
- margem direita é 50px
- margem inferior é de 75px
- margem esquerda é 100px
Se a margin propriedade tem três valores:
- margin : 25px 50px 75px;
- margem superior é 25px
- margens direita e esquerda são 50px
- margem inferior é de 75px
Se a margin propriedade tem dois valores:
- margin : 25px 50px;
- margens superior e inferior são 25px
- margens direita e esquerda são 50px
Se a margin propriedade tem um valor:
- margin : 25px;
- todas as quatro margens são 25px
Aplicar o valor de auto
Você pode definir a margin propriedade para auto para centrar horizontalmente o elemento dentro de seu recipiente.
O elemento, então, tomar-se a largura especificada, eo espaço restante será dividido igualmente entre a esquerda ea direita margins :
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»
Todas as propriedades CSS Margem
| Propriedade | Descrição |
|---|---|
| margin | Um atalho para definir as margin propriedades em uma declaração |
| margin-bottom | Define a parte inferior margin de um elemento |
| margin-left | Define a esquerda margin de um elemento |
| margin-right | Define-se o direito margin de um elemento |
| margin-top | Define a parte superior margin de um elemento |