Por que seus layouts ficam quebrados?

7 de agosto de 2008

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.

Clique Aqui!

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

1 comentários:

tecnoutil disse...

Muitas pessoas tem dor de cabeça com esta questão. Agora acho que a maioria destes problemas acabaram quando entenderem os modelos de caixas dos navegadores.

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa