Padding

Descrição:

O padding é o enchimento entre a borda do elemento externo e a margem do elemento interno.

É suportado pelos browsers: IE: Internet Explorer (4), F: Firefox (1), N: Netscape (4).


Sintaxe
:

padding-top: 20px; (auto, length %)
padding-right: 10px; (auto, length %)
padding-bottom: 8px; (auto, length %)
padding-left: 20px; (auto, length %)
padding: 10px; (auto, length %)
padding: 10px 6px 8px 0; (auto, length %)

Exemplo:

HTML CSS
Miltinho

Leninha

div.quadro_externo {
border: 1px solid red;
padding: 10px;
height: 100px;
width: 200px;
}

div.quadro_interno {
border: 1px dashed blue;
}

Resultado no FF 2.0 Resultado no IE 6.0

Porque isso acontece?

Isso acontece porque os browsers tratam o padding de forma diferente.

  • O I.E. acrescenta o padding de fora pra dentro, ou seja, ele empurra o elemento interno para dentro.
  • O F.F. acrescenta o padding de dentro pra fora, ou seja, ele empurra o elemento externo para fora.

Como resolver o problema?

Uma solução para se ter o resultado esperado seria “não usar o padding” e para substitui-lo, dê o mesmo valor às margens do elemento interno. O efeito visual é o mesmo.

Veja abaixo:

HTML CSS
Miltinho

Leninha

div.quadro_externo {
border: 1px solid red;
height: 100px;
width: 200px;
}

div.quadro_interno {
border: 1px dashed blue;
margin: 10px;
}

Resultado no FF 2.0 Resultado no IE 6.0

Referências:

hugoribeiro
w3schools
maujor
tagbytag
tizag
davesite
1keydata
cssbasics
pt-br.html
revver (vídeo)
alexestudos


Anúncios

Tags: , ,

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s


%d blogueiros gostam disto: