Recordar orden de las medidas CSS

Imaginemos el siguiente ejemplo:

h1 { margin: 1em 2em 3em 4em; }

La gente que comienza con CSS tiende a confundir o no recordar el orden de las medidas para las formas abreviadas.

Voy a comentar dos trucos para que sea fácil recordar dicho orden.

  1. TRouBLe (por Chris Coyier): La traducción vendría a ser “problemas, apuros, molestia”, una buena forma de recordarlo. La letra mayúscula indica el orden T(top)R(right)ouB(bottom)L(left)e.
  2. Agujas de reloj: Mi forma preferida, creo haberla leído en algún libro. Simplemente tienes que pensar en el orden en el que se mueven las agujas del reloj: en punto (top), y cuarto (right), y media (bottom), menos cuarto (left). Este método también puede aplicarse a las formas simplificadas donde se omiten algunos valores.
  3. Reloj y Espejo: Si usamos formas simplificadas y omitimos valores, podemos seguir pensando en la dirección de las agujas del reloj y cuando omitamos un valor se obtendra su reflejo (efecto de espejo) tal cual comenta Javi.

Una paranoya de post… es más fácil verlo o imaginarlo que ponerlo con palabras 😛

3 responses to “Recordar orden de las medidas CSS

  1. Buen truco el de las agujas del reloj.

    Yo acabe aprendiéndome de memoria la secuencia en inglés: Top-Right-Bottom-Left.

    Lo que nunca consigo recordar sin consultar algún documento es el método abreviado para asignar una medida en Top, otra medida en Bottom y la misma medida para el Left y el Right que sería algo así: (Top), (Left, Right), (Bottom)

    En este caso y ante la duda suelo utilizar el clásico Top-Right-Bottom-Left aunque utilice exactamente la misma medida para el Left y el Right.

    Un saludo!

    1. Hola David, creo entender a lo que te refieres. Simplemente puedes volver a pensar en las agujas del reloj y cuando llegues a bottom piensa que si se repite el left, omites right.

      Lo mismo sucede si piensas en un top-bottom y left-right (margin: 2em 3em;), creo que el truco esta en pensar “frenar las agujas del reloj” en cuanto se repiten con las anteriores.

      Vaya paranoya que he montado con el reloj jejeje 😀

  2. Sabia el truco de las agujas de reloj para los 4 valores pero no me había parado a pensar en lo de si omites uno se obtiene su valor reflejado.

    Bueno truco, me lo apunto!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *