Webpoint

Estava com um layout para programar que a idéia era não ter espaço no topo, ou seja, teoricamente uma margem no topo com o valor de zero. Sendo assim, apliquei um margin: 0 no elemento body. No IE6 e 7 funcionou como esperado, mas no Opera e no Firefox ficou ainda um espaçamento no topo. Por que isso ocorre?

No Internet Explorer há elementos que por padrão tem uma propriedade chamada on having layout (tem layout) . Existe também um artigo desse do Maujor em português. Este assunto é muito amplo e pretendo postar um artigo exclusivamente para isto, mas uma lida neste artigo do Maujor já diz tudo. Entenda por enquanto que isto acontece por causa deste comportamento do IE, que não segue os padrões, possuindo uma própria maneira de tratar o layout.

O que importa, a solução!

Há várias soluções, mas há uma que achei bastante interessante pois me levou a usá-la para várias situações. Há um seletor * que especifica todos os elementos. Se você fizer algo do tipo:

* {  margin: 0;

padding: 0;

}

Não haverá margem e padding no topo, nos lados e abaixo do elemento body. O problema é que isto será aplicado a todos elementos. Todos sem exceção, pois este seletor serve justamente para este fim. Sendo assim, parágrafos, divs, inputs, uls ficarão com uma margin e um padding com o valor de zero.

Depois que isto aconteceu, comecei a perceber que no decorrer do desenvolvimento da diagramação html / css ocorreu menos diferenças entre o IE e o Firefox. O fato é que você colocando o padding e margin para zero torna-se o padrão da página e assim não haverá diferença destas duas propriedades. Resumindo: se um elemento ul, por exemplo, não tem uma margem especificada, esta margem será o padrão do browser, que é diferente para cada um. Você usando esta propriedade você “iguala” os browsers nesta propriedade. Então para dar uma margem em qualquer elemento, é só especificar que ele será o resultado final.

Além disto, você pode também usá-lo para colocar outras propriedades padrões. Por exemplo, em quase todo site eu costumo especificar o height para auto, então por que não colocar como propriedade do elemento asterisco? Assim quando surgir um elemento com um height diferente, simplesmente eu especifico, se não vai ficar como auto.