↔️ Margin

Las clases de margen en Bodystyle permiten gestionar la distancia entre elementos de manera eficiente y responsiva. Estas clases facilitan la aplicación de márgenes específicos en diferentes direcciones (superior, inferior, izquierda, derecha) y tamaños (pequeño, mediano, grande), adaptándose a las necesidades de diseño web.

Introducción

Como se mencionó anteriormente disponer de un conjunto de clases para generar un distancia o separación entre elementos es muy útil ya que, a partir de ellas se trabajará en gran parte en el HTML sin necesidad de acudir a archivos CSS adicionales. Esto agiliza el desarrollo y mantenimiento del código.

Direcciones

Existen cuatro direcciones posibles, (TOP, BOTTOM, LEFT, RIGHT) a las cuales se les puede aplicar un margen.

Ejemplo de margen aplicado
Ejemplo de margen aplicado
    
     
    
Ejemplo de margen aplicado

    
Ejemplo de margen aplicado
Clase Rango Descripción
mt-[valor] 0-15 Aplica un margen superior (top) al elemento. 1 = 0.5em y 1em = 16px
mb-[valor] 0-15 Aplica un margen inferior (bottom) al elemento. 1 = 0.5em y 1em = 16px
ml-[valor] 0-15 Aplica un margen izquierdo (left) al elemento. 1 = 0.5em y 1em = 16px
mr-[valor] 0-15 Aplica un margen derecho (right) al elemento. 1 = 0.5em y 1em = 16px

Borrar Margen

Para eliminar un margen aplicado a un elemento, Bodystyle ofrece la clase m-0, que restablece el margen a cero en todas las direcciones.

Tamaños

Bodystyle provee un conjunto de clases para aplicar el margin en diferentes tamañps de pantalla, esto implica que un mismo elementos puede disponer de varios margens dependiendo del tamaño de pantalla en el que se visualice.

Clase Descripción
mt-[medida]-[valor] Margen arriba en un determinada (MEDIDA: m / s / xs) y el valor es igual al ya documentado en apartados anteriores
mb-[medida]-[valor] Margen abajo en un determinada (MEDIDA: m / s / xs) y el valor es igual al ya documentado en apartados anteriores
ml-[medida]-[valor] Margen izquierda en un determinada (MEDIDA: m / s / xs) y el valor es igual al ya documentado en apartados anteriores
mr-[medida]-[valor] Margen derecha en un determinada (MEDIDA: m / s / xs) y el valor es igual al ya documentado en apartados anteriores

 Información

Si no se especifica una medida, el margen se aplicará a todas las medidas de pantalla. Las medidas disponibles son:

  • m: Mediano (min-width: 1030px)
  • s: Pequeño (min-width: 770px)
  • xs: Extra Pequeño (min-width: 400px)

Ejemplos

En el siguiete ejemplo vamos a aplicar un margen responsive, de manera tal de clarificar los que se trató en esta sección de la documentación.

Elemento Margen
Elemento NO Margen
    
    
Elemento Margen

    
Elemento NO Margen

Margen X e Y

Bodystyle también incluye clases para aplicar márgenes horizontales y verticales de manera conjunta. Las clases mx-[valor] y my-[valor] permiten aplicar márgenes en ambas direcciones simultáneamente.

Elemento 1
Elemento 2
Elemento 3
    
Elemento 1

    
    
Elemento 2

    
Elemento 3
Elemento 1
Elemento 2
Elemento 3
    

        
Elemento 1

        
        
Elemento 2

        
Elemento 3
Clase Rango Descripción
mx-[valor] 0-15 Aplica un margen horizontal (left y right) al elemento. 1 = 0.5em y 1em = 16px
my-[valor] 0-15 Aplica un margen vertical (top y bottom) al elemento. 1 = 0.5em y 1em = 16px
mx-[medida]-[valor] 0-15 Aplica un margen horizontal (left y right) al elemento en una determinada medida (MEDIDA: m / s / xs) y el valor es igual al ya documentado en apartados anteriores
my-[medida]-[valor] 0-15 Aplica un margen vertical (top y bottom) al elemento en una determinada medida (MEDIDA: m / s / xs) y el valor es igual al ya documentado en apartados anteriores

Autor