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

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
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.

Deja un comentario

TAMBIÉN TE INTERESA

avatares-para-los-clientes-de-un-supermercado

Las tiendas y las calles se podrían llenar de avatares inteligentes…

Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

anillo-Circular

Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

OnePlus-10-Pro

Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

movil-plegable-honor-magic-v

Nuevo móvil plegable en el mercado: Honor Magic V

Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

hacker

Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

OPPO-Air-Glass

Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio