Qué saber
- Agregue una regla a su hoja de estilo CSS que establezca todos los márgenes y valores de relleno de los elementos HTML en cero.
Este artículo explica cómo usar CSS poner a cero márgenes y bordes para que sus páginas web se muestren de forma coherente en todos los navegadores.
Normalizar valores para márgenes y relleno
La mejor manera de resolver el problema de un modelo de caja inconsistente es establecer todos los márgenes y valores de relleno de los elementos HTML en cero. Hay algunas formas en las que puede hacer esto agregando esta regla CSS a su hoja de estilo:
Aunque esta regla no es específica, debido a que está en su hoja de estilo externa, tendrá una mayor especificidad que los valores predeterminados del navegador. Dado que esos valores predeterminados son lo que está sobrescribiendo, este estilo logrará lo que se propone hacer.
Una vez que desactive todos los márgenes y el relleno, deberá volver a activarlos de forma selectiva para partes específicas de su página web para lograr la apariencia que requiere su diseño.
Utilice CSS para normalizar los bordes
Mayor versiones de Internet Explorer tenía un borde transparente o invisible alrededor de los elementos. A menos que establezca el borde en 0, ese borde puede estropear los diseños de su página. Si ha decidido que continuará admitiendo estas versiones anticuadas de IE, deberá abordar esto agregando lo siguiente a su cuerpo y estilos HTML:
HTML, cuerpo {
margen: 0px;
relleno: 0px;
borde: 0px;
}
De manera similar a cómo desactivó los márgenes y el relleno, este nuevo estilo también desactivará los bordes predeterminados. También puede hacer lo mismo utilizando el selector de comodines que se mostró anteriormente en este artículo.
Por qué son importantes los márgenes y las fronteras uniformes en el diseño web
El navegador web actual ha recorrido un largo camino desde los días locos en los que cualquier tipo de coherencia entre navegadores era una ilusión. Los navegadores web de hoy son totalmente compatibles con los estándares. Funcionan muy bien juntos y ofrecen una visualización de página bastante consistente en los distintos navegadores. Esto incluye las últimas versiones de Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari y los distintos navegadores que se encuentran enla miríada de dispositivos móviles acceder a sitios web hoy.
Si bien ciertamente se ha avanzado en la forma en que los navegadores muestran CSS, todavía existen inconsistencias entre estas diversas opciones de software. Una de las inconsistencias más comunes es cómo esos navegadores calculan los márgenes, el relleno y los bordes de forma predeterminada.
Debido a que estos aspectos del modelo de caja afectan a todos los elementos HTML y porque son esenciales en la creación de páginas diseños, una visualización inconsistente significa que una página puede verse muy bien en un navegador, pero verse un poco fuera de lugar en otro. Para combatir este problema, muchos diseñadores web normalizan estos aspectos del modelo de caja. Esta práctica también se conoce como poniendo a cero los valores de los márgenes, rellenoy fronteras.
Una nota sobre los valores predeterminados del navegador
Los navegadores web establecen una configuración predeterminada para determinados aspectos de visualización de una página. Por ejemplo, los hipervínculos son azules y están subrayados de forma predeterminada. Este comportamiento es consistente en varios navegadores y, aunque es algo que la mayoría de los diseñadores cambian para adaptarse al diseño necesidades de su proyecto específico, el hecho de que todos estén comenzando con los mismos valores predeterminados hace que sea más fácil cambios. Lamentablemente, el valor predeterminado para márgenes, relleno y bordes no disfruta del mismo nivel de coherencia entre navegadores.