Espaciadores

Clases auxiliares que permiten añadir márgenes en los elementos de línea, o en los de bloque, cuando las estructuras de retícula no son suficientes.

Contenido

Espaciadores

Las clases auxiliares espaciadoras empiezan con el prefijo .m para el caso de los márgenes y con el prefijo .p para los paddings, y se añaden los sufijos -top, -bottom, -left o -right en función de la dirección del margen. Si se desea un margen más pequeño, se agrega también el prefijo -small, y si se desea más grande, el prefijo -large.

Márgenes conjuntos

Elemento adicionalMargin derecho e izquierdoElemento adicional
Elemento adicionalMargen derecho e izquierdo pequeño (x2)Elemento adicional
Elemento adicionalMargen derecho e izquierdo pequeño (x4)Elemento adicional
Elemento adicionalMargen derecho e izquierdo grande (2x)Elemento adicional
Elemento adicionalMargen derecho e izquierdo grande (4x)Elemento adicional
Elemento adicional
Margin superior e inferior
Elemento adicional

Elemento adicional
Margen superior e inferior pequeño (y2)
Elemento adicional

Elemento adicional
Margen superior e inferior pequeño (y4)
Elemento adicional

Elemento adicional
Margen superior e inferior grande (2y)
Elemento adicional

Elemento adicional
Margen superior e inferior grande (4y)
Elemento adicional

<div class="m-x">Margen derecho e izquierdo</div>

<div class="m-x2">Margen derecho e izquierdo pequeño (x2)</div>

<div class="m-x4">Margen derecho e izquierdo pequeño (x4)</div>

<div class="m-2x">Margen derecho e izquierdo grande (2x)</div>

<div class="m-4x">Margen derecho e izquierdo grande (4x)</div>

<div class="m-y">Margen superior e inferior</div>

<div class="m-y2">Margen superior e inferior pequeño (y2)</div>

<div class="m-y4">Margen superior e inferior pequeño (y4)</div>

<div class="m-2y">Margen superior e inferior grande (2y)</div>

<div class="m-4y">Margen superior e inferior grande (4y)</div>

Márgenes por posición

Margen derechoElemento adicional
Margen derecho pequeño (x2)Elemento adicional
Margen derecho pequeño (x4)Elemento adicional
Margen derecho grande (2x)Elemento adicional
Margen derecho grande (4x)Elemento adicional
Elemento adicionalMargen izquierdo
Elemento adicionalMargen izquierdo pequeño (x2)
Elemento adicionalMargen izquierdo pequeño (x4)
Elemento adicionalMargen izquierdo grande (2x)
Elemento adicionalMargen izquierdo grande (4x)
Elemento adicional
Margen superior

Elemento adicional
Margen superior pequeño (y2)

Elemento adicional
Margen superior pequeño (y4)

Elemento adicional
Margen superior grande (2y)

Elemento adicional
Margen superior grande (4y)

Margen inferior
Elemento adicional

Margen inferior pequeño (y2)
Elemento adicional

Margen inferior pequeño (y4)
Elemento adicional

Margen inferior grande (2y)
Elemento adicional

Margen inferior grande (4y)
Elemento adicional

<span class="m-right-x">Margen derecho</span>

<span class="m-right-x2">Margen derecho pequeño (x2)</span>

<span class="m-right-x4">Margen derecho pequeño (x4)</span>

<span class="m-right-2x">Margen derecho grande (2x)</span>

<span class="m-right-4x">Margen derecho grande (4x)</span>

<span class="m-left-x">Margen izquierdo</span>

<span class="m-left-x2">Margen izquierdo pequeño (x2)</span>

<span class="m-left-x4">Margen izquierdo pequeño (x4)</span>

<span class="m-left-2x">Margen izquierdo grande (2x)</span>

<span class="m-left-4x">Margen izquierdo grande (4x)</span>

<div class="m-top-y">Margen superior</div>

<div class="m-top-y2">Margen superior pequeño (y2)</div>

<div class="m-top-y4">Margen superior pequeño (y4)</div>

<div class="m-top-2y">Margen superior grande (2y)</div>

<div class="m-top-4y">Margen superior grande (4y)</div>

<div class="m-bottom-y">Margen inferior</div>

<div class="m-bottom-y2">Margen inferior pequeño (y2)</div>

<div class="m-bottom-y4">Margen inferior pequeño (y4)</div>

<div class="m-bottom-2y">Margen inferior grande (2y)</div>

<div class="m-bottom-4y">Margen inferior grande (4y)</div>

Márgenes responsive

Margen inferior mobile
Elemento adicional

Margen inferior pequeño mobile (y2)
Elemento adicional

Margen inferior grande mobile (2y)
Elemento adicional

Margen inferior tablet
Elemento adicional

Margen inferior pequeño tablet (y2)
Elemento adicional

Margen inferior grande tablet (2y)
Elemento adicional

<div class="m-bottom-y-mobile">Margen inferior mobile</div>

<div class="m-bottom-y2-mobile">Margen inferior pequeño mobile (y2)</div>

<div class="m-bottom-2y-mobile">Margen inferior grande mobile (2y)</div>

<div class="m-bottom-y-tablet">Margen inferior tablet (y)</div>

<div class="m-bottom-y2-tablet">Margen inferior pequeño tablet (y2)</div>

<div class="m-bottom-2y-mobile">Margen inferior grande tablet (2y)</div>

Paddings conjuntos

Elemento adicionalPadding derecho e izquierdoElemento adicional
Elemento adicionalPadding derecho e izquierdo pequeño (x2)Elemento adicional
Elemento adicionalPadding derecho e izquierdo pequeño (x4)Elemento adicional
Elemento adicionalPadding derecho e izquierdo grande (2x)Elemento adicional
Elemento adicionalPadding derecho e izquierdo grande (4x)Elemento adicional
Elemento adicional
Padding superior e inferior
Elemento adicional

Elemento adicional
Padding superior e inferior pequeño (y2)
Elemento adicional

Elemento adicional
Padding superior e inferior pequeño (y4)
Elemento adicional

Elemento adicional
Padding superior e inferior grande (2y)
Elemento adicional

Elemento adicional
Padding superior e inferior grande (4y)
Elemento adicional

<div class="p-x">Padding derecho e izquierdo</div>

<div class="p-x2">Padding derecho e izquierdo pequeño (x2)</div>

<div class="p-x4">Padding derecho e izquierdo pequeño (x4)</div>

<div class="p-2x">Padding derecho e izquierdo grande (2x)</div>

<div class="p-4x">Padding derecho e izquierdo grande (4x)</div>

<div class="p-y">Padding superior e inferior</div>

<div class="p-y2">Padding superior e inferior pequeño (y2)</div>

<div class="p-y4">Padding superior e inferior pequeño (y4)</div>

<div class="p-2y">Padding superior e inferior grande (2y)</div>

<div class="p-4y">Padding superior e inferior grande (4y)</div>

Paddings por posición

Padding derechoElemento adicional
Padding derecho pequeño (x2)Elemento adicional
Padding derecho pequeño (x4)Elemento adicional
Padding derecho grande (2x)Elemento adicional
Padding derecho grande (4x)Elemento adicional
Elemento adicionalPadding izquierdo
Elemento adicionalPadding izquierdo pequeño (x2)
Elemento adicionalPadding izquierdo pequeño (x4)
Elemento adicionalPadding izquierdo grande (2x)
Elemento adicionalPadding izquierdo grande (4x)
Elemento adicional
Padding superior

Elemento adicional
Padding superior pequeño (x2)

Elemento adicional
Padding superior pequeño (x4)

Elemento adicional
Padding superior grande (2x)

Elemento adicional
Padding superior grande (4x)

Padding inferior
Elemento adicional

Padding inferior pequeño (x2)
Elemento adicional

Padding inferior pequeño (x4)
Elemento adicional

Padding inferior grande (2x)
Elemento adicional

Padding inferior grande (4x)
Elemento adicional

<span class="p-right-x">Padding derecho</span>

<span class="p-right-x2">Padding derecho pequeño (x2)</span>

<span class="p-right-x4">Padding derecho pequeño (x4)</span>

<span class="p-right-2x">Padding derecho grande (2x)</span>

<span class="p-right-4x">Padding derecho grande (4x)</span>

<span class="p-left-x">Padding izquierdo</span>

<span class="p-left-x2">Padding izquierdo pequeño (x2)</span>

<span class="p-left-x4">Padding izquierdo pequeño (x4)</span>

<span class="p-left-2x">Padding izquierdo grande (2x)</span>

<span class="p-left-4x">Padding izquierdo grande (4x)</span>

<div class="p-top-y">Padding superior</div>

<div class="p-top-y2">Padding superior pequeño (y2)</div>

<div class="p-top-y4">Padding superior pequeño (y4)</div>

<div class="p-top-2y">Padding superior grande (2y)</div>

<div class="p-top-4y">Padding superior grande (4y)</div>

<div class="p-bottom-y">Padding inferior</div>

<div class="p-bottom-y2">Padding inferior pequeño (y2)</div>

<div class="p-bottom-y4">Padding inferior pequeño (y4)</div>

<div class="p-bottom-2y">Padding inferior grande (2y)</div>

<div class="p-bottom-4y">Padding inferior grande (4y)</div>

Paddings responsive

Padding inferior mobile
Elemento adicional

Padding inferior pequeño mobile (y2)
Elemento adicional

Padding inferior grande mobile (2y)
Elemento adicional

Padding inferior tablet
Elemento adicional

Padding inferior pequeño tablet (y2)
Elemento adicional

Padding inferior grande tablet (2y)
Elemento adicional

<div class="p-bottom-y-mobile">Padding inferior mobile</div>

<div class="p-bottom-y2-mobile">Padding inferior pequeño mobile (y2)</div>

<div class="p-bottom-2y-mobile">Padding inferior grande mobile (2y)</div>

<div class="p-bottom-y-tablet">Padding inferior tablet (y)</div>

<div class="p-bottom-y2-tablet">Padding inferior pequeño tablet (y2)</div>

<div class="p-bottom-2y-mobile">Padding inferior grande tablet (2y)</div>
Subir