Diseña y publica tus sitios rápidamente

Cambia el espaciado y los márgenes de tu página

¡Actualización!

Ya lanzamos el Bulk Style Editor. Con él puedes editar los estilos (como el espaciado y los márgenes) de todas tus apps, textos, contenedores, etc., al mismo tiempo y desde el mismo panel. ¡Pruébalo! Te permitirá diseñar más rápido.

Cómo modificar el espaciado y los márgenes

Con este artículo aprenderás a editar el espaciado y los márgenes de tus apps y bloques (antes llamados contenedores). Para hacer debes usar los dots de estilo.

La guía rápida

Haz clic en un dot de estilo y desplázate hasta donde veas las opciones de espaciado/márgenes. Ajústalas al arrastrar el botón de la barra de lado a lado o al introducir un número en la columna de la derecha. En este video podrás ver cómo se hace.

Paso por paso

Al pasar tu cursor por varias partes de tu layout, notarás que aparecen  unas figuras blancas con forma de globo. Estos son los dots de estilo y se localizan en y cerca de la esquina superior izquierda de tus apps y bloques. Con ellos puedes diseñar tu sitio, al igual que cambiar el espaciado y los márgenes.

Dots de estilo

Para abrirlos, solamente debes hacer clic en alguno. Notarás que al pasar tu cursor sobre un dot, el cursor cambia a un pincel.

Ícono de pincel con un dot de estilo

Espaciado superior e inferior

Una vez que hagas clic en él, verás que se abrirá un cuadro como el de la imagen a continuación. Primero modificaremos el espaciado superior e inferior (“Top Spacing” y “Bottom Spacing” respectivamente).

Opciones que tienes con el dot de estilo

La siguiente imagen muestra las opciones para una fila entera. De nuevo, nos interesa “Top” y “Bottom”.

Opciones sobre las filas en los dots de estilo

Cambia el espaciado en una columna

La siguiente imagen muestra las opciones para una columna. Ahí podrás intentar diferentes niveles de espaciado.

Opciones sobre las columnas en los dots de estilo

Por ejemplo, puedes cambiarlo en una columna como esta, que solamente tiene la app de Text o texto.

Una columna con 0 pixeles de espaciado

Cómo acceder al dot de estilo de una columna

Localiza el dot de la columna, el cual está arriba de ella.

El dot de estilo de la columna

Puedes identificar el elemento que ese dot administra al pasar tu cursor sobre él. Al hacerlo notarás que un delineado negro envuelve el área que se modificará al hacer cambios en ese dot.

Al pasar el cursor sobre el dot, se delineará el área que puedes modificar con él

Haz clic en él y verás que sus opciones se abrirán. También podrás notar que los valores de espaciado (spacing) están en cero, lo que quiere decir que no tiene espaciado.

Opciones sobre las columnas en los dots de estilo

Espaciado superior e inferior para una columna

Primero, agregaremos espacio en la parte superior. Arrastra la barra hacia la derecha o introduce un número en su casilla. El número más alto que puedes introducir es 50. Aquí te mostraremos un ejemplo de cómo se ve cuando cambias el número a 50. Notarás que el espacio de la parte superior de la columna empuja a la app hacia abajo.

Comparación entre columnas tras haber agregado 50 pixeles de espaciado superior

Puedes hacer lo mismo con el espaciado inferior. Aquí el espacio será agregado abajo y todo lo que haya debajo de esa columna, será empujado hacia abajo.

Comparación entre columnas tras haber agregado 50 pixeles de espaciado superior

Espaciado lateral en una columna

El espaciado lateral (llamado left/right spacing en inglés), modifica el espacio en ambos lados de la columna al mismo tiempo. Te mostraremos un ejemplo. Empezaremos con 0 pixeles de espaciado. Toma en cuenta el delineado negro alrededor de la columna.

Columna con 0 pixeles de espaciado lateral

Ahora, con el valor en 50 pixeles para el espaciado lateral, las apps están alejadas 50 pixeles de la orilla, como en la imagen a continuación. Puedes compararla con la imagen anterior para que veas la diferencia.

Columna con 50 pixeles de espaciado lateral

Se agregaron 50 pixeles a ambos lados.

Así que, dependiendo del dot que estás editando, puedes agregar espaciado a una app, columna, sección o al bloque entero. Haz clic en los diferentes dots para editar su espaciado en específico.

Márgenes

Solamente puedes aplicar márgenes a las apps y son básicamente lo mismo que el espaciado. La diferencia la explica la imagen a continuación.

La diferencia entre espaciado (Spacing) y márgenes (Margin)

Así que, si quieres modificar tu layout, puedes cambiar el espaciado y los márgenes de tus apps y bloques. ¡No tengas miedo de experimentar!

¿Tienes dudas o comentarios de este tutorial? Háznoslos saber en la sección de comentarios.