Apresentação dos objetos no browser
Todo objeto exibido no browser segue o seguinte formato:
A propriedade padding é utilizada para definir um espaçamento interno em alguns elementos
(por espaçamento interno queremos dizer a distância entre o limite do elemento, sua borda, e seu respectivo conteúdo)
e tem as subpropriedades listadas a seguir:
padding-top
padding-right
padding-bottom
padding-left
Essas propriedades aplicam uma distância entre o limite do elemento e seu conteúdo acima, à direita,
abaixo e à esquerda respectivamente. Essa ordem é importante para entendermos como funciona a
shorthand property do padding.
Podemos definir todos os valores para as subpropriedades do padding em uma única propriedade,
chamada exatamente de padding , e seu comportamento é descrito nos exemplos a seguir:
Se passado somente um valor para a propriedade padding , esse mesmo valor é aplicado em todas as direções.
p {
padding: 10px;
}
Se passados dois valores, o primeiro será aplicado acima e abaixo (equivalente a passar o mesmo valor para padding-top e padding-bottom )
e o segundo será aplicado à direita e à esquerda(equivalente ao mesmo valor para padding-right e padding-left ).
p {
padding: 10px 15px;
}
Se passados três valores, o primeiro será aplicado acima (equivalente a padding-top ),
o segundo será aplicado à direita e à esquerda (equivalente a passar o mesmo valor para padding-right padding-left )
e o terceiro valor será aplicado abaixo do elemento (equivalente a padding-bottom ).
p {
padding: 10px 20px 15px;
}
Se passados quatro valores, serão aplicados respectivamente a padding-top , padding-right ,
padding-bottom e padding-left.
Para facilitar a memorização dessa ordem, basta lembrar que os valores são aplicados em sentido horário.
p {
padding: 10px 20px 15px 5px;
}
Margem é muito semelhante com a diferença que ocorre fora do elemento, ou seja, nos elementos que circundam o elemento atual.