Atajos CSS explicados visual y rápidamente

Microtutorial con la descripción visual del sistema abreviado (shorthands) de propiedades CSS para rellenos (padding), bordes (border) y márgenes (margin) aplicables a etiquetas de cajas HTML.

Como vemos en clases, es posible aplicar a las etiquetas de caja del HTML valores de rellenos, bordes y márgenes expresados en varias unidades, en el videotutorial se trabaja, a modo de ejemplo, con medidas expresadas en pixeles.

Como vimos en el video, y veremos a continuación, la escitura de códigos usando shorthands escriben las propiedades comenzando por el lado superior de la caja, para continuar, sucesivamente, por el lado derecho, inferior e izquierdo.
Siguiendo el sentido de las agujas del reloj, serían las direcciones que toman el indicador horario de un reloj a las 12, a las 3, 6 y 9 horas.

Veamos entonces cuatro modos posibles de fijar valores de relleno de una caja:

1. Cuando los cuatro valores son diferentes:

Shorthand para 4 valores diferentes

2. Cuando los valores laterales (derecha e izquierda) coinciden:

Shorthand para valores laterales iguales

Expresamos los valores en tres grupos, separados por un espacio entre sí, correspondiendo el primer al lado superior, el segundo a los valores laterales, y el último al lado inferior de la caja creada por la etiqueta HTML a la que le estemos aplicando las propiedades.

3. Cuando los valores de los lados superior e inferior, y de los laterales coinciden dos a dos:

Shorthand para 2 parejas de valores iguales

Expresamos los valores en dos grupos, seguidos de sus unidades, separados por un espacio entre sí, correspondiendo el primero a las magnitudes de los lados superior e inferior, y el segundo a las magnitudes de los laterales.

4. Cuando los cuatro valores son iguales:

Shorthand para 4 valores iguales

Los valores en un solo grupo, con su unidad de medida, el que corresponderá a cada uno de los cuatro lados definidos por la etiqueta de bloque en el HTML.

Espero que el material les haya servido de ayuda, y como siempre, pueden dejar sus comentarios o consultas usando el formulario que encontrarán al pie de esta entrada.

Descargar códigos de ejemplo aquí: Ejemplo de shorthands CSS usados en el tutorial

Saludos para todos!
Plácido Luna.