Joomla! Amazônia – Seu site de tutorial e curso de Joomla

Manchetes:
Você está aqui: CSS A propriedade CSS margin

A propriedade CSS margin

cssAs margens externas são definidas usando a propriedade margin (que afeta todas as margens ao mesmo tempo) ou as propriedades margin-top, margin-bottom, margin-right e margin-left que permite alterar as margens individualmente.

Sintaxe:

margin-top: comprimento | porcentagem % | auto
margin-bottom: comprimento | porcentagem % | auto
margin-right: comprimento | porcentagem % | auto
margin-left: comprimento | porcentagem % | auto

A propriedade margin afeta vários aspectos das margens externas de uma vez só. A ordem dos fatores é importante. Podem ser incluídos todos quatro valores, apenas um (todas as margens iguais) ou dois (margens horizontais e verticais).

Sintaxe:

margin: margin-top margin-right margin-bottom margin-left
margin: margin-top% margin-right% margin-bottom% margin-left%
margin: espaço_vertical espaço_horizontal
margin: margem_de_todos_os_lados

Exemplos: margin-top

<html>
<head>
<style type="text/css">
<!--
p {margin-top: 3cm;}
-->
</style>
</head>
<body>
<p>A margem superior de 3cm</p>
</body>
</html>

Veja como fica:
img24

Exemplos: margin-right

<html>
<head>
<style type="text/css">
<!--
p {margin-right:250px;}
-->
</style>
</head>
<body>
<p>Uma margem direita de 250px nesta
frase mais longa dentro do parágrafo</p>
</body>
</html>

Veja como fica:
img25









Exemplos: margin-bottom

<html>
<head>
<style type="text/css">
<!--
p {margin-bottom: 3em;}
-->
</style>
</head>
<body>
<p>Uma margem inferior de 3.0em</p>
</body>
</html>

Veja como fica:

img26

Exemplos: margin-left

<html>
<head>
<style type="text/css">
<!--
p {margin-left: 20%;}
-->
</style>
</head>
<body>
<p>Uma margem esquerda de 20%</p>
</body>
</html>

Veja como fica:
img27

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.

Em declaração única a ordem das margens é: superior, direita, inferior e esquerda.

Exemplo:

<html>
<head>
<style type="text/css">
<!--
p {margin: 10px 50px 70px 15px;}
-->
</style>
</head>
<body>
<p>Uma margem superior de 10px; </br> Uma margem direita de 50px;</br>
Uma margem inferior de 70px; </br>E uma margem esquerda de 15px</p>
</body>
</html>

Veja como fica:
img28
< Anterior   Próximo >