O que saber
- Adicione uma regra à sua folha de estilo CSS que defina todas as margens e valores de preenchimento dos elementos HTML como zero.
Este artigo explica como usar CSS para zerar margens e bordas para que suas páginas da web sejam renderizadas de maneira 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:
class = “ql-syntax”> Mesmo que esta regra não seja específica, porque está 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á sobrescrevendo, 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
As versões mais antigas do Internet Explorer tinham 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 de HTML: HTML, corpo {
margem: 0px;
preenchimento: 0px;
borda: 0px;
}
class = “ql-syntax”> Semelhante a 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 já percorreu um longo caminho desde os dias malucos em que qualquer tipo de consistência entre navegadores era uma ilusão. 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 na miríade de dispositivos móveis que acessam 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. Como esses aspectos do modelo de caixa afetam todos os elementos HTML e são essenciais na criação de layouts de página, uma exibição inconsistente significa que uma página pode ter uma ótima aparência em um navegador, mas pode parecer ligeiramente diferente em 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 de margens, preenchimento e bordas.
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. Esse comportamento é consistente em vários navegadores e, embora seja algo que a maioria dos designers muda para se adequar às necessidades de design de seu projeto específico, o fato de todos eles estarem começando com os mesmos padrões torna mais fácil fazer essas mudanças. Infelizmente, o valor padrão para margens, preenchimento e bordas não tem o mesmo nível de consistência entre navegadores.
Formato mla apa chicago Sua Citação
Kyrnin, Jennifer. “Como usar CSS para zerar suas margens e fronteiras.” ThoughtCo, maio. 14 de 2021, thinkingco.com/css-zero-out-margins-3464247.
Kyrnin, Jennifer. (2021, 14 de maio). Como usar CSS para zerar suas margens e fronteiras. Obtido em https://www.thoughtco.com/css-zero-out-margins-3464247
Kyrnin, Jennifer. “Como usar CSS para zerar suas margens e fronteiras.” ThoughtCo. https://www.thoughtco.com/css-zero-out-margins-3464247 (acessado em 26 de maio de 2021).
