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

GoPro-HERO11-Black-Mini

GoPro HERO11 Black Mini: características de esta pequeña gran cámara

Ya tenemos en las tiendas la nueva cámara GoPro HERO11 Black Mini. En un post anterior, dábamos a conocer los detalles de su hermana mayor y los nuevos lanzamientos de GoPro y ahora que tenemos ya la venta a esta pequeña gran joya, es menester hablar de ella por su calidad y versatilidad. Así estas

Razones para tener una web, te las explicamos

Razones para tener una página web, te las explicamos

O estás en internet o no estás. Así de fácil se puede resumir la necesidad de tener una página a nivel particular o en un negocio. Desde el punto de vista individual, es suficiente con tener perfiles activos en redes sociales, sin embargo en el caso de una empresa, la que sea, es indispensable contar

materiales-fabricación-aditiva

Más allá de las impresoras 3D: la fabricación aditiva

El elemento clave de la fabricación aditiva siempre ha sido la impresora 3D; la industria se ha construido sobre una base de diferentes tecnologías de impresión, cada una con sus propios puntos fuertes y débiles, capacidades y limitaciones, y aplicaciones más compatibles. En el último informe de IDTechEx ‘3D Printing and Additive Manufacturing 2023-2033: Technology

OPPO-Snapdragon-8-Gen-2

El chip Snapdragon 8 Gen 2 se estrenará en el próximo Find X de OPPO

OPPO ha participado en la Snapdragon Summit 2022 para presentar su colaboración con Qualcomm Technologies en materia en la tecnología Ray Tracing para dispositivos móviles. Las dos empresas, que llevan trabajando conjuntamente desde la primera fase de desarrollo del procesador de nueva generación, harán posible que los usuarios disfruten de la tecnología una ray tracing basada

e-bike-Bike-Ocasion

Black Friday: ¿buen momento para hacernos con una e-bike?

Sin duda, el Black Friday es una oportunidad para comprar muchos productos de tecnología entre los que cabría pensar en una e-bike. Este tipo de bicicletas tienen mucho componente tecnológico y han subido en ventas como la espuma desde principios de la pandemia, allá por marzo de 2020.   En este post nos sumergiremos como

reloj Haylou GST Lite

Haylou GST Lite, un reloj inteligente con un precio y rendimiento imbatibles

De todos los modelos de relojes inteligentes, encontramos uno, el Haylou GST Lite, que sorprende por su alto rendimiento, bajo precio y las muchas funciones que incorpora para nuestro día a día. Comparado con otros dispositivos similares, parece difícil encontrar uno reloj como este desde el punto de vista de su rendimiento y el precio.