Propriedades Margin
As margens nos elementos HTML
A propriedade para margens, define um valor para espessura das margens dos elementos HTML. As propriedades para margens são as listadas abaixo:
| 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
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <style type="text/css"> p {margin-top: 2cm;} </style> </head> <body> <p>Uma margem superior de 2cm</p> </body> </html> |
- Margem Direita – margin-right
|
1 2 3 4 5 6 7 8 9 10 11 |
<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> |
- Margem Inferior – margin-bottom
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <style type="text/css"> p {margin-bottom: 2em;} </style> </head> <body> <p>Uma margem inferior de 2.0em</p> </body> </html> |
- Margem Esquerda – margin-left
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <style type="text/css"> p {margin-left: 10%;} </style> </head> <body> <p>Uma margem esquerda de 10%</p> </body> </html> |
- 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
