Back
Você está aqui: Home 
Tutoriais HTML/CSS CSS Propriedades do CSS padding
Tutoriais HTML/CSS CSS Propriedades do CSS padding
CSS
Propriedades do CSS padding
As margens internas (padding) são definidas usando a propriedade padding (que afeta todas as margens internas ao mesmo tempo) ou as propriedades padding-top, padding-bottom, padding-right e padding-left.
Sintaxe:
padding-top: comprimento | porcentagem %
padding-bottom: comprimento | porcentagem %
padding-right: comprimento | porcentagem %
padding-left: comprimento | porcentagem %
A propriedade padding afeta vários aspectos das margens internas de uma vez só. A ordem dos fatores é importante. Podem ser incluídos todos quatro valores ou apenas um.
Sintaxe:
padding: padding-top padding-right padding-bottom padding-left
padding: padding-top% padding-right% padding-bottom% padding-left%
padding: espaço_vertical espaço_horizontal
padding: margem_de_todos_os_lados
Exemplo de padding-top:
<html>
<head>
<style type="text/css">
<!--
p {padding-top: 2cm;}
-->
</style>
</head>
<body>
<p>Um espaçamento superior de 2cm</p>
</body>
</html>
Veja como fica:
Exemplo de padding-rignt:
<html>
<head>
<style type="text/css">
<!--
p {padding-right: 100px;}
-->
</style>
</head>
<body>
<p>Um espaçamento direito de 100px nesta
frase mais longa dentro do parágrafo</p>
</body>
</html>
Veja como fica:
Exemplo de padding-bottom:
<html>
<head>
<style type="text/css">
<!--
p {padding-bottom: 5em;}
-->
</style>
</head>
<body>
<p>Um espaçamento inferior de 5.0em</p>
</body>
</html>
Veja como fica:
Exemplo de padding-left:
<head>
<style type="text/css">
<!--
p {padding-left: 20%;}
-->
</style>
</head>
<body>
<p>Um espaçamento esquerdo de 20%</p>
</body>
</html>
Veja como fica:
Exemplo de padding-left:
