Aprenda a usar CSS para normalizar márgenes, acolchados y bordes

Aprenda a usar CSS para normalizar márgenes, acolchados y bordes

Aprenda a usar CSS para normalizar márgenes, acolchados y bordes

VALORACIÓN DEL ARTÍCULO:
5/5


El navegador web de hoy en día ha recorrido un largo camino desde los días locos en los que cualquier tipo de consistencia entre navegadores era una ilusión. Los navegadores web de hoy en día son todos muy compatibles con los estándares. Juegan muy bien juntos y ofrecen una visualización de la página bastante consistente en los distintos navegadores. Esto incluye las últimas versiones de Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari, y los diversos navegadores que se encuentran en la miríada de dispositivos móviles que se utilizan para acceder al sitio web hoy en día.

Si bien es cierto que se ha progresado en lo que se refiere a los navegadores web y a la forma en que muestran CSS, todavía existen inconsistencias entre estas diversas opciones de software. Una de las inconsistencias más comunes es la forma en que 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 diseños de página, una visualización inconsistente significa que una página puede verse bien en un navegador, pero verse un poco mal 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 «reducción a cero» de los valores de márgenes, relleno y bordes.

Nota sobre los valores predeterminados del navegador

Todos los navegadores web tienen ajustes predeterminados para ciertos aspectos de visualización de una página. Por ejemplo, los hipervínculos son azules y están subrayados por defecto. Esto es consistente en varios navegadores, y aunque es algo que la mayoría de los diseñadores cambian para adaptarse a las necesidades de diseño de su proyecto específico, el hecho de que todos empiecen con los mismos valores predeterminados hace que sea más fácil hacer estos cambios. Lamentablemente, el valor predeterminado para márgenes, relleno y bordes no disfruta del mismo nivel de consistencia entre navegadores.

Normalización de valores para márgenes y relleno

La mejor manera de resolver el problema del modelo de caja inconsistente es poner a cero todos los márgenes y valores de relleno de los elementos HTML. Hay algunas maneras en las que puede hacer esto es añadir esta regla CSS a su hoja de estilo:

Esta regla CSS utiliza el carácter * o comodín. Ese carácter significa «todos los elementos» y básicamente seleccionaría cada elemento HTML y pondría los márgenes y el relleno a 0. Aunque esta regla es muy inespecífica, porque está en su hoja de estilo externa, tendrá una especificidad mayor que los valores por defecto del navegador. Dado que esos valores predeterminados son los que está sobrescribiendo, este estilo logrará lo que se propone hacer.

Otra opción es aplicar estos valores a los elementos HTML y body. Dado que todos los demás elementos de su página serán hijos de estos dos elementos, la cascada CSS debe aplicar estos valores a todos los demás elementos.

Esto comenzará su diseño en el mismo lugar en todos los navegadores, pero una cosa que debe recordar es que una vez que haya desactivado todos los márgenes y el relleno, tendrá que volver a activarlos selectivamente en partes específicas de su página web para lograr el aspecto y la sensación que su diseño requiere.

Bordes

Puede que pienses «pero ningún navegador tiene un borde alrededor del elemento del cuerpo por defecto». Esto no es estrictamente cierto. Las versiones anteriores de Internet Explorer tenían un borde transparente o invisible alrededor de los elementos. A menos que establezca el borde en 0, ese borde puede estropear sus diseños de página. Si usted ha decidido que continuará soportando estas versiones anticuadas de IE, necesitará tratar esto añadiendo lo siguiente a su cuerpo y estilos HTML:

HTML, cuerpo {
margen: 0px;
acolchado: 0px;
frontera: 0px;
}

De forma similar a como se desactivaron los márgenes y el relleno, este nuevo estilo también desactivará los bordes predeterminados. También puede hacer lo mismo usando el selector de comodines que se muestra en la imagen de arriba

.

Original de Jennifer Krynin. Editado por Jeremy Girard.

TAMBIÉN TE INTERESA

seguridad de los datos personales

Descuidos en tu día a día que comprometen la seguridad de los datos personales

Hoy es el Día de Internet Segura, una jornada para concienciar a los usuarios sobre la importancia de cuidar la seguridad de los datos personales. La seguridad en Internet se ha convertido en una prioridad global para todos, amén del creciente número de robos virtuales e intrusiones de los delincuentes a la información sensible de

planes de entrenamiento con IA

La era de los gimnasios smart y los planes de entrenamiento con IA

El sector de los gimnasios está empezando a introducir la tecnología para sus usuarios. Los planes de entrenamiento con IA ya son una realidad en espacios como los de Metropolitan. Es cuestión de tiempo que toda la innovación que viene de la tecnología comience a aterrizar en nuestras vidas para cuidar nuestro cuerpo. De hecho,

apps de citas

Apps de citas y el fraude romántico: ligoteo y estafas

Hay a quien las apps de citas le funcionan muy bien en todos los sentidos. Además de lograr el match deseado, su seguridad no se ve comprometida en ningún momento. Así da gusto, encontrar pareja nunca fue tan sencillo. Otra cosa es que la otra persona con la que se hace match no sea la

riesgos DeepSeek

Reportan los primeros riesgos de seguridad en DeepSeek

Pocos días después de la irrupción de DeepSeek en el mundo, ya empiezan a aflorar algunos problemas relacionados con la seguridad en DeepSeek y la privacidad de los datos que emplean los usuarios. Son millones y millones personas las que ya están probando las mieles de la IA china. El modelo R1 de DeepSeek ha