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

botón-de-comprar

8 estrategias para que una tienda online mejore la tasa de conversión de sus clientes

La tasa de conversión se refiere a la métrica utilizada en marketing y comercio electrónico para medir el éxito de una campaña publicitaria, un sitio web o una estrategia de ventas. Representa el porcentaje de visitantes o clientes potenciales que realizan una acción específica deseada, como comprar un producto, suscribirse a un servicio, completar un

precio-OPPO-A58

Nuevo OPPO A58, diseño premium para durar y durar…

OPPO da continuidad a su ya famosa Seria A con un nuevo modelo: el OPPO A58. Por un precio algo superior a los 200 euros y todo lo que ofrece este smartphone, no se le puede pedir a a esta marca que sabe manejarse con soltura tanto en el gama media como la alta e

workstation-HP-Z6-G5-A

Nuevo HP Z6 G5 A: para renderizar a toda potencia

La gestión de los flujos de trabajo en proyectos de alta exigencia requiere de una tecnología avanzada debido a la gran cantidad de información que se utiliza. Para cumplir con las demandas profesionales, HP ha anunciado el próximo lanzamiento en diciembre de la estación de trabajo HP Z6 G5 A, un potente ordenador de escritorio que permite la creación,

nonoki-música-streaming

Más competencia para Spotify: Nonoki

La música en streaming no deja de recibir plataformas para la distribución de contenido. Nonoki es la última en aparecer en escena, sumando más competencia para las conocidísimas Spotify, Apple Music o Amazon Music Unlimited. Además de ellas, no hay que olvidar otras aplicaciones como Soundcloud o Tidal, por citar otros ejemplos destacados. En este