Blog what I write

Recordar orden de las medidas CSS

post - - 3 replies -

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 😛

  • 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!

    • 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 😀

  • 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!