Propiedad de de CSS que permite generar una distancia entre los elementos dispuestos en una
página web. El reacomodamiento de los elementos se basa tanto en el nivel de margen como en el espacio
interno que tenga un determinado elemento con respecto de su propio contenido (padding).
En muchas oportunidades es nececesario definir un nivel de margen distinto para un único elemento dentro del DOM según
el tamaño de la pantalla donde se presente, por esta razón la biblioteca cuenta con un conjunto de clases
que permite definir margenes apropiados para cada situación y tipo de pantalla.
Margin General
En este apartado veremos el margen que se aplica a un elemento para todas las pantallas y en todas las direcciones.
La clase utilizada para este ejemplo es m-[em] siendo em la cantidad de PX de margen requerido,
siendo 1em = 16PX, en el caso de las clases de margin toman el valor 1 con 0.5em lo que es igual a 8px. Es importante aclarar que el parámetro de la clase puede varias desde 1 a 15 donde 1 es igual a 8px.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
En este ejemplo se le aplica un margen de 0.5em, lo que es lo mismo a 8px.
En este caso no cambiará el margen en ningún tamaño de pantalla, lo que implica que se mantendrá constante.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Margin General Top
Para el caso del margen en la parte superior es exactamente igual pero la clase utilizada es mt-[em]
para el valor 1 corresponde a 8px.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Margen General Derecho
La clase utilizada para agregar un margen general a la derecha utilizamos la
clase mr-[em] em puede variar de 1 a 15
siendo 1 = 8px.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Margen General Izquierdo
La clase utilizada para agregar un margen general a la derecha utilizamos la
clase ml-[em] em puede variar de 1 a 15
siendo 1 = 8px.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Margin General Abajo
Margen aplicado abajo del elemento con la clase mb-[em].
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Margin Especializado
Existen clases dentro de la biblioteca que permiten aplicar margenes a elementos en determinados
tamaños de pantalla, de manera tal que solo afecte al elemento en circunstancias determinadas.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Como se puede observar no hay margenes que afectan al elemento, pero si llevamos
el tamaño de la pantalla a menos 1030px se creará un margen en todas las direcciones
dejando un espacio de 1.5em.
Esto se logra con la clase .m-[tamaño]-[em] donde tamaño
corresponde al tamaño de pantalla utilizado definidos en la página de esta documentación correspondiente
a este tema Medidas.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Margenes Combinados
Para este ejemplo se aplicará varios margenes a un mismo elemento utilizando todas
las posibilidaddes provistas por la biblioteca, ajustando el margen adaptandolo
a diferentes dispositivos.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Si se achica el tamaño de pantalla se notará como el margen en todas las direcciones
va disminuyendo paulatinamente.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Margin Combinado Direccionado
Podemos utilizar el mismo concepto anterior pero utilizando las clases
que generen un margen en una sola dirección en diferentes tamaños de pantalla.
Para el ejemplo se utilizará un margen izquierdo de 1.5em en equipos grandes, 1em en equipos
medianos, 0.5em en equipos chicos y 0em en equpos extra chicos.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Si se achica el tamaño de pantalla se notará como el margen izquierdo se atenúa hasta 0
para los diferentes tamaños de pantalla.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Se puede realizar lo mismo con mr-[tamaño]-[em],
mt-[tamaño]-[em] y mr-[tamaño]-[em].
es importante resaltar que se pueden combinar todas estas clases para generar margenes completamente personalizados
que permitan ajustar el contenido de manera precisa.
Margenes en el Eje X e Y
Existen en la biblioteca clases que permiten para diferentes tamaños de pantalla establecer un
margen arriba y abajo del elemento, como así tambien a la izquierda y a la derecha del mismo.
Las clases utilizadas son my-[tamaño]-[em] y
mx-[tamaño]-[em]. Es importante aclarar que si no se agrega
el parámetro [tamaño] el margen se representará en todos los tamaños de pantalla.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
La combinación de todas las clases de margen son muchas pero todas pueden asociarse
para encontrar el resultado esperado, la clases vistas en los primeros apartados como
las últimas mencionadas pueden utilizarse juntas.
Margenes en X e Y En Tamaños Diferentes
En el ejemplo que sigue se aplicará un margen arriba y abajo en dispositivos grandes
de 3em, en medianos de 2em, en chicos de 1em y en extra chicos de 0em. También se agregará
un margen a la derecha y a la izquierda de 0em en dispositivos grandes, 1em en dispositivos medianos,
2em en dispositovos chicos y 3em en dispositivos extra chicos.
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
TOP
LEFT
ELEMENTO
RIGHT
BOTTON
Alias Para Margenes
Tamaño
Español
Inglés
L
m-[0-15]
mi-[0-15]
md-[0-15]
mar-[0-15]
mab-[0-15]
m-[0-15]
ml-[0-15]
mr-[0-15]
mt-[0-15]
mb-[0-15]
M
m-m-[0-15]
mi-m-[0-15]
md-m-[0-15]
mar-m-[0-15]
mab-m-[0-15]
m-m-[0-15]
ml-m-[0-15]
mr-m-[0-15]
mt-m-[0-15]
mb-m-[0-15]
S
m-s-[0-15]
mi-s-[0-15]
md-s-[0-15]
mar-s-[0-15]
mab-s-[0-15]
m-s-[0-15]
ml-s-[0-15]
mr-s-[0-15]
mt-s-[0-15]
mb-s-[0-15]
XS
m-xs-[0-15]
mi-xs-[0-15]
md-xs-[0-15]
mar-xs-[0-15]
mab-xs-[0-15]
m-xs-[0-15]
ml-xs-[0-15]
mr-xs-[0-15]
mt-xs-[0-15]
mb-xs-[0-15]
En la tabla anterior sólo se tienen en cuenta las clases que difieren y que cumplen las mismas funciones
las que se nombran igual en ambos idiomas no se mencionan.
Borrar Margenes
Es posible borrar un margen de un elemento, en muchas oportunidades tenemos definidos para un determinado
elemento un margen que siempre se aplica ya que existe una propiedad CSS asignada al mismo, pero queremos de
excepcional quitar ese margen y mostrar el elemento. En estos casos usamos las clases de margens vistas con el parámetro
igual a 0.
Con Margen
CON 1
CON 1
Sin Margen
CON 1
CON 1
Notese que podemos utilizar esta propiedad desde cualquier tipo de dispositivo por ejemplo
cuando disponemos de un margen en disposivos grandes y medianos pero queremos que en dispositivos chicos
no se aplique, en estos casos definimos .m-s-0 y se borrará el margen.
CON 1
CON 1
Ejemplo Practico
En este ejemplo tomaremos dos botones dispuestos en con display flex a través
de las clases de Flexbox
cuando la pantalla es pequeña (menor a 770px) queremos que estos dos botones tomen una configuración flex-direction: column y se coloquen uno
abajo del otro con un margen de 8px, mientras que cuando los dispositivos son de una pantalla mayores a 770px los elementos se ubicarán
uno al lado del otro con un margen de 8px a la izquirda.
Como se puede observar cuando se achica la pantalla va a existir un margen derecho en el primer botón
que separa a los elementos cuando están hubicados de manera horizontal, pero cuando se colocan uno abajo del otro
es el segundo botón el que tiene el margen arriba. Para lograr esto es necesario reiniciar el margen derecha del primer
botón con la clase .mt-s-1.