Seo Portugal
 
 
Segunda, 22 Abril 2019
 
 

Margin e padding CSS

Como 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.

CSS utilização do margin e padding

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;
}