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

soluciones-de-Lenovo-para-el-trabajo-colaborativo

ThinkSmart View Plus de Lenovo, trabajo colaborativo a otro nivel

El dispositivo ThinkSmart View Plus de Lenovo redefine el concepto del trabajo colaborativo en las empresas. Ahora que muchos de los empleados de una oficina se conectan con otros mediante Micosoft Teams, Lenovo plante un dispositivo cuya única función es ofrecer servicio para el trabajo conectado. ¿Qué es y qué ofrece ThinkSmart View Plus? ThinkSmart

10-razones-para-apostar-por-Google-Ads

Google Ads o la mejor manera de gestionar la publicidad en internet para un negocio

Google Ads es una de las herramientas publicitarias más poderosas que existen en la actualidad. A través de ella, las empresas pueden llegar a un público amplio y diverso de manera efectiva, aumentar su visibilidad en línea y aumentar sus ventas. Pero ¿cómo exactamente puede Google Ads ayudar a un negocio? En este artículo, exploraremos

foto-del-sol-creada-por-AI

Webs de inteligencia artificial para crear imágenes

Inteligencia artificial para crear imágenes, esa es una de las tendencias que ha popularizado la IA y el boom de ChatGPT y compañía. Hoy vamos a hablar de una serie de herramientas, páginas webs o soluciones que permiten crear imágenes de la nada para poder utilizar de forma libre. Hay muchas, pero nosotros recogemos en

dia-del-padre

Con estos 8 productos de LG seguro que aciertas en el Día del Padre

En lugar de rompernos la cabeza buscando productos de distintas marcas para regalar en el Día del Padre, nosotros hemos acudido a una firma como LG para recomendar artículos que podrían satisfacer a todos los que tienen hijos. Es su día y, siendo honestos, la tecnología es, posiblemente, el regalo que más aprecien. De modo

nuevo-diseño-de-Uber

Uber rediseña su app y añade interesantes funciones

La popular app de delivery y transporte, Uber, ha sido rediseñada con el objetivo de ser mucho más intuitiva y fácil de usar para los miles y miles de usuarios que tiene en España. Dado que son los mayores cambios que se han producido hasta la fecha en la historia de la aplicación, conviene detenerse

foto-Samsung-S23

Ya tenemos entre manos el nuevo Samsung S23…

Mientras cae el precio del Samgung S22 en plataformas como Amazon, la compañía surcoreana presenta la serie S23, su nuevo coloso. Como lo fue en su momento, la generación anterior y su variable Ultra, el nuevo buque insignia llega para competir en lo más alto en cuanto a prestaciones… y también precio. Sobra decir que