Sábado, 28 Mayo 2016 14:33

CSS: Margin + Padding Shorthands (i)

Valora este artículo
(1 Voto)

Cabezal sobre métodos abreviados en margin y padding css

CSS: Abreviando la escritura de valores en margin y padding

Como material de apoyo a los cursos de diseño web publico esta entrada con algunas ayudas gráficas sobre la forma de codificar en forma abreviada los valores para márgenes y rellenos con CSS; teniendo en cuenta que la escritura, en ambos casos, se puede escribir de forma corta siguiendo el mismo método.

Como veremos más abajo, la escitura de códigos usando shorthands expresa valores comenzando por el lado superior de la caja, luego se expresan los valores para 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 cuáles los cuatro modos posibles:

1. Cuando los cuatro valores son diferentes

Expresamos los valores de márgenes y rellenos con éstos cuatro valores, seguidos de sus unidades, separados entre sí por un espacio, según el orden indicado más arriba:

Márgenes, 4 valores diferentes

Márgenes, 4 valores diferentes

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

Expresamos los valores de margin y padding usando tres valores, 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:

Márgenes, 3 valores diferentes

Márgenes, 3 valores diferentes

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

Expresamos los valores de márgenes y rellenos usando dos valores, 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:

Márgenes, 4 valores diferentes

Márgenes, 4 valores diferentes

4. Cuando los cuatro valores son iguales

Los valores de margin y padding se pueden expresar con un solo valor, y su unidad de medida, el que corresponderá a cada uno de los cuatro lados definidos por la etiqueta de bloque en el HTML:

Márgenes, 4 valores diferentes

Márgenes, 4 valores diferentes

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.

Saludos para todos!
Plácido Luna.

 

Visto 557 veces Modificado por última vez en Sábado, 28 Mayo 2016 16:57