Use CSS para zerar suas margens e fronteiras

Este artigo explica como usar CSS zerar margens e bordas para que suas páginas da web sejam processadas de forma consistente em todos os navegadores.

Normalizando Valores para Margens e Preenchimento

A melhor maneira de resolver o problema de um modelo de caixa inconsistente é definir todas as margens e valores de preenchimento dos elementos HTML como zero. Existem algumas maneiras de fazer isso: adicionando esta regra CSS à sua folha de estilo:

Mesmo que essa regra não seja específica, por estar em sua folha de estilo externa, ela terá uma especificidade mais alta do que os valores padrão do navegador. Uma vez que esses padrões são o que você está substituindo, este estilo realizará o que você está planejando fazer.

Depois de desativar todas as margens e preenchimento, você precisará ativá-los seletivamente de volta para partes específicas de sua página da web para obter a aparência que seu design exige.

Use CSS para normalizar bordas

Mais velho versões do Internet Explorer tinha uma borda transparente ou invisível ao redor dos elementos. A menos que você defina a borda como 0, essa borda pode bagunçar seus layouts de página. Se você decidiu que continuará a oferecer suporte a essas versões antiquadas do IE, precisará resolver isso adicionando o seguinte ao seu corpo e estilos HTML:

HTML, corpo {
margem: 0px;
preenchimento: 0px;
 borda: 0px;
}

Semelhante ao modo como você desativou as margens e o preenchimento, este novo estilo também desativará as bordas padrão. Você também pode fazer a mesma coisa usando o seletor curinga mostrado anteriormente neste artigo.

Por que margens e fronteiras consistentes são importantes no design da Web

O navegador da web de hoje percorreu um longo caminho desde os dias malucos em que qualquer tipo de consistência entre navegadores era ilusório. Os navegadores da web de hoje são totalmente compatíveis com os padrões. Eles funcionam bem juntos e fornecem uma exibição de página bastante consistente em vários navegadores. Isso inclui as versões mais recentes do Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari e os vários navegadores encontrados noa miríade de dispositivos móveis acessando sites hoje.

Embora certamente tenha havido progresso na forma como os navegadores exibem CSS, ainda existem inconsistências entre essas várias opções de software. Uma das inconsistências comuns é como esses navegadores calculam as margens, preenchimento e bordas por padrão.

Porque esses aspectos do modelo de caixa afetam todos os elementos HTML e porque são essenciais na criação da página layouts, uma exibição inconsistente significa que uma página pode ter uma ótima aparência em um navegador, mas pode parecer um pouco fora do outro. Para combater esse problema, muitos web designers normalizam esses aspectos do modelo de caixa. Esta prática também é conhecida como zerando os valores das margens, preenchimentoe fronteiras.

Uma nota sobre os padrões do navegador

Cada navegador da Web define configurações padrão para determinados aspectos de exibição de uma página. Por exemplo, os hiperlinks são azuis e sublinhados por padrão. Este comportamento é consistente em vários navegadores e, embora seja algo que a maioria dos designers muda para se adequar ao design necessidades de seu projeto específico, o fato de que todos eles estão começando com os mesmos padrões torna mais fácil torná-los alterar. Infelizmente, o valor padrão para margens, preenchimento e bordas não tem o mesmo nível de consistência entre navegadores.