Margin e padding CSSComo controlar a apresentação de um elemento definindo as propriedades margin e padding.
- Definir margin de um elemento
- Definir padding de um elemento
Definindo margin de um elemento
Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos (ou as margens do documento).
Como definir margins para o documento, ou seja, para o elemento <body>. A ilustração a seguir mostra como serão as margens da página.

O CSS :
body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }
Ou, utilizando uma sintaxe mais elegante:
body { margin: 100px 40px 10px 70px; }
As margens para a maioria dos elementos podem ser definidas conforme o exemplo acima. Podemos então, por exemplo, definir margens para todos os parágrafos <p>:
body { margin: 100px 40px 10px 70px; }
p { margin: 5px 50px 5px 50px; }
Definindo padding de um elemento
Padding pode também ser entendido como "enchimento". Isto faz sentido, porque padding não é processado na distância entre elementos, padding define simplesmente a distância entre a margem e o conteúdo do elemento.
Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma cor de fundo definida:
h1 { background: yellow; }
h2 { background: orange; }
Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente à volta de cada um deles:
h1 { background: yellow; padding: 20px 20px 20px 80px; }
h2 { background: orange; padding-left:120px; }
|