Propriedades Margin
As margens nos elementos HTML
|
Propriedade
|
Efeito
|
|
margin-top:
|
Define a margem superior.
|
|
margin-right:
|
define a margem direita;
|
|
margin-bottom:
|
define a margem inferior;
|
|
margin-left:
|
define a margem esquerda;
|
|
margin:
|
maneira abreviada para todas as margens;
|
Valores válidos para a
propriedade Margin
- auto: valor default da margem
- length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
- %: porcentagem da largura do elemento pai
Vamos a seguir analisar cada uma delas
detalhadamente através de exemplos práticos.
Margem Superior
– margin-top
<html><head><style type="text/css">p {margin-top: 2cm;}</style></head><body><p>Uma margem superior de 2cm</p></body></html>
Este é o efeito da folha de estilo acima:
Uma margem superior de 2cm
Margem Direita – margin-right
<html><head><style type="text/css">p {margin-right: 300px;}</style></head><body><p>Uma margem direita de 300px nesta frase mais longa dentro do parágrafo</p></body></html>
Este é o efeito da folha de estilo acima:
Uma margem direita de 300px nesta
frase mais longa dentro do parágrafo
<html><head><style type="text/css">p {margin-bottom: 2em;}</style></head><body><p>Uma margem inferior de 2.0em</p></body></html>Este é o efeito da folha de estilo acima:
Uma margem inferior de 2.0em
Margem Esquerda – margin-left
<html><head><style type="text/css">p {margin-left: 10%;}</style></head><body><p>Uma margem esquerda de 10%</p></body></html>Este é o efeito da folha de estilo acima:
Uma margem esquerda de 10%
Todas as quatro margens em uma
declaração única
A propriedade da margin permitem que você controle o espaçamento em volta
dos elementos HTML. São válidos valores negativos para margem, com o objetivo
de sobrepor elementos.
<html><head><style type="text/css"><!--p {margin: 20px 40px 80px 5px;}--></style></head><body><p>Uma margem superior de 20px, uma margem direita de 40px,uma margem inferior de 80px e uma margem esquerda de 5px</p></body></html>
Este é o efeito da folha de estilo acima:
Uma margem superior de 20px, uma
margem direita de 40px, uma margem inferior de 80px e uma margem esquerda de
5px
Nenhum comentário:
Postar um comentário