Playground de margin en CSS

Explora margin con controles interactivos por todos los lados, por lado o por eje, cambia unidades, compara propiedades físicas y lógicas y usa auto para desplazar o centrar el bloque.

Configuración

Salida CSS

La salida abreviada agrupa valores en shorthands CSS cuando es posible. La salida individual genera una declaración por cada propiedad para revisar o copiar cada valor por separado.

AbreviadaIndividual

Aplicación

Elige cómo repartir los valores: puedes aplicar un único valor a todo el elemento o ajustar solo los lados, ejes o grupos que te interesen.

TodosIndividualEjes

Sistema de propiedades

Las propiedades físicas se aplican directamente a los lados del elemento, mientras que las propiedades lógicas se aplican a los lados del elemento en función de la dirección del texto.

FísicasLógicas

Dirección del texto

Con propiedades lógicas es importante comprobar cómo cambian los resultados en idiomas que se escriben de izquierda a derecha y de derecha a izquierda.

Izquierda a derecha (ltr)Derecha a izquierda (rtl)

Unidad

CSS ofrece multitud de unidades. En cada lab puedes probar las más habituales para esa propiedad.

Todos los lados

Superior

Derecho

Usar auto

Inferior

Izquierdo

Usar auto

Horizontal

Usar auto

Vertical

margin

HTML

<div class="margin-demo">
  <div dir="ltr">
    margin
  </div>
</div>

Tailwind CSS

Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.

<div class="inline-[min(100%,28rem)] min-block-80 border border-blue-400 rounded-xl bg-gray-100">
  <div class="inline-max min-block-20 p-4 border border-dashed border-amber-500 rounded-lg bg-white m-[24px]" dir="ltr">
    margin
  </div>
</div>

CSS

.margin-demo {
  inline-size: min(100%, 28rem);
  min-block-size: 20rem;
  border: 1px solid #60a5fa;
  border-radius: 0.75rem;
  background-color: #f3f4f6;
}

.margin-demo > div {
  inline-size: max-content;
  min-block-size: 5rem;
  padding: 1rem;
  border: 1px dashed #f59e0b;
  border-radius: 0.5rem;
  background-color: #ffffff;
  margin: 24px;
}

.margin-demo {
  inline-size: min(100%, 28rem);
  min-block-size: 20rem;
  border: 1px solid #60a5fa;
  border-radius: 0.75rem;
  background-color: #f3f4f6;

  > div {
    inline-size: max-content;
    min-block-size: 5rem;
    padding: 1rem;
    border: 1px dashed #f59e0b;
    border-radius: 0.5rem;
    background-color: #ffffff;
    margin: 24px;
  }
}