Menú

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

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

Margen superior e inferior pequeño (y2)

Elemento adicional

Margen superior e inferior pequeño (y4)

Elemento adicional

Margen superior e inferior grande (2y)

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

Padding superior e inferior pequeño (y2)

Elemento adicional

Padding superior e inferior pequeño (y4)

Elemento adicional

Padding superior e inferior grande (2y)

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