Por que seus layouts ficam quebrados?

Tenho visto muito layouts quebrados, pelo fato dos iniciantes em CSS não entenderem os conceitos de Layout dos navegadores. O modelo de caixa é uma das pedras angulares da CSS e determina como os elementos são exibidos. Cada elemento é considerado uma caixa retangular ou quadrada composta por conteúdo, padding, border e margin. O preenchimento destes elementos são opcionais. Padding, border e margin, por padrão são zerados, porém vários elementos recebem margens e preenchimentos da folha de estilos dos navegadores. Por pré-caução aconselho a sempre zera as margens dos seus elementos com seletores universais:

*{
margin:0;
padding:0;
}

Este seletor * é universal e qualquer propriedade nele afeta toda sua folha de estilo.



Na CSS width e height referem-se á largura e altura da área de conteúdo. Se você adicionar margens, padding e bordas em suas caixas, não afetará o tamanho do conteúdo que você definiu, mas aumentará o tamanho total do elemento. Se você quer uma caixa com largura e altura de 100px, este será o conteúdo. Se adicionar margens de 10px, padding 5px, está caixa passará a ter o tamanho total de 130px de largura e altura.



#minhacaixa {
widht: 100px;
height: 100px;
margin: 10px;
padding: 5px;
}

No IE (Internet Explore) é diferente, pois ele soma o conteúdo com o preenchimento (padding). Então a mesma caixa terá o tamanho total de 120px;



#minhacaixa {
widht: 100px;
height: 100px;
margin: 10px;
padding: 5px;
}

No Internet Explore o modelo de caixa proprietário pode resultar em um tamanho de elementos menor do que você, na realidade, queria ter.

Subscreva o CSS-Desvandado completo!
Subscreva CSS - Desvendado por Email