Añade espacio dentro y alrededor de los elementos.

Learn DXPR BuilderBuild pagesElementen stylen

Da aire a un texto dentro de un recuadro de color, o separa un botón del párrafo de arriba. El relleno (padding) es el espacio dentro del borde de un elemento; el margen (margin) es el espacio fuera de él. Ambos se definen en el modelo de caja arriba del panel Style. Tu tema y una sección nueva traen su propio espaciado; esta página muestra cómo encaja el tuyo.

El vídeo da a un botón un margen superior de 24 px.

Antes de empezar

  • Abre la página en DXPR Builder; señalar un elemento muestra su barra de controles con More. ¿No conoces el constructor? Consulta Crea tu primera página.
  • Save en el diálogo conserva un cambio en el editor. Save en la barra de herramientas del constructor, sobre tu contenido, guarda la página y muestra "Saved field".
  • Usa el modelo de caja para arreglar un hueco en una página.
  • Usa tu tema o una clase para espaciado que se repite, como el hueco entre todas las secciones.
  • Mantén una escala. Las páginas se ven tranquilas cuando cada hueco viene de unos pocos tamaños:
Tamaño Úsalo para
8 px Huecos pequeños dentro de un grupo, como un icono y su etiqueta
16 px Entre elementos relacionados
24 px Entre bloques de contenido
32 px Dentro de una tarjeta o un recuadro destacado
48 px Entre secciones

Receta: aire alrededor de un botón

  1. Pasa el cursor sobre el Button, haz clic en More y luego en Settings.
  2. Abre el panel Style y haz clic en el lado superior de Margin, el anillo exterior del modelo de caja. Los candados empiezan abiertos, así que solo este lado cambia.
  3. Comprueba que el botón de unidad muestra PX. Escribe 24 en el campo de valor y pulsa Enter. El lado ahora dice 24px y el botón baja.
  4. Haz clic en Save en el diálogo y luego en Save en la barra de herramientas.

En un Button el margen va en el botón mismo, así que el espacio empieza justo en su borde.

Panel Style de un Button con un Margin superior de 24px en el modelo de caja, junto al botón Reserva una visita con aire encima, bajo el texto Visitas al campus

Receta: una sección más alta

Una sección nueva recibe relleno superior e inferior de la clase Vertical padding size 5 (py-5), que supera al modelo de caja. Quita esa clase primero. Comprueba que el título del diálogo dice Section, no Row ni Column.

  1. Pasa el cursor sobre la Section, haz clic en More y luego en Settings.
  2. En el panel General, busca HTML classes y haz clic en la × del chip Vertical padding size 5 (py-5). La sección pierde algo de aire arriba y abajo. Si no hay tal chip, omite este paso.
  3. Abre el panel Style. Haz clic en el lado superior de Padding, escribe 96 y pulsa Enter.
  4. Haz lo mismo con el lado inferior de Padding. Ambos lados ahora dicen 96px y la sección crece más alta.
  5. Haz clic en Save en el diálogo y luego en Save en la barra de herramientas.

Panel Style de una Section con 96px de Padding superior e inferior, junto a esa sección, ahora más alta, con fondo gris y texto centrado

Lo que ves

Modelo de caja con 32 px de relleno en cada lado y un margen inferior de 48 px, junto al bloque gris Visitas al campus y el botón 48 px debajo

Cada lado que defines muestra su valor en el modelo de caja, como 24px. El botón queda 24 px más abajo, y la sección tiene 96 px de aire sobre y bajo su contenido.

Cómo funciona el modelo de caja

+----------------- Margin ------------------+
||  +-------------- Border ---------------+  |
||  |  +----------- Padding ------------+ |  |
||  |  |                                | |  |
||  |  |         width × height         | |  |
||  |  |                                | |  |
||  |  +--------------------------------+ |  |
||  +-------------------------------------+  |
+-------------------------------------------+
  • Cada anillo tiene cuatro lados. Un lado muestra su valor, como 24px, o "-" cuando no está definido.
  • Haz clic en un lado para abrir un selector pequeño con un deslizador, un campo de valor y un botón de unidad. La unidad es PX o %; Border solo admite px.
  • Escribe un valor y pulsa Enter, o arrastra el deslizador. Las teclas de flecha arriba y abajo cambian el valor en 1. Escape cierra el selector.
  • Para quitar un lado, vacía el campo de valor y pulsa Enter. El lado muestra "-" y tu tema decide de nuevo.

El margen va de -200 a 200, el relleno de 0 a 200 y el borde de 0 a 50. El ancho y alto van de 0 a 2000. Un margen negativo acerca el elemento a su vecino. Un valor escrito fuera del rango se recorta al límite más cercano.

Los candados

Cada anillo tiene un candado junto a su nombre: Margin, Border y Padding. Cuando el candado está cerrado, un valor que defines en un lado pasa a los cuatro. Cuando está abierto, cada lado conserva su valor. Cerrar el candado no cambia los valores que ya tienes; solo el próximo valor que definas se copia.

Porcentaje, tamaño y ancho de pantalla

Un valor en porcentaje es una parte del ancho del elemento padre, también arriba y abajo. Así que un relleno superior de 10% es más alto en una columna ancha que en una estrecha.

El centro del modelo de caja contiene ancho × alto. Los elementos que se dimensionan solos, como Image y Map, ignoran esos dos recuadros.

El modelo de caja no tiene valores por tamaño de pantalla. Para más relleno en pantallas grandes que en teléfonos, usa clases Bootstrap. Por ejemplo, py-3 py-lg-5 da 16 px en pantallas pequeñas y 48 px desde 992 px de ancho. Consulta ID y clases HTML para cómo escribirlas.

Cómo tus valores se combinan con el espaciado del tema

  • Las secciones nuevas traen relleno. Una sección que añades en el editor recibe la clase Vertical padding size 5 (py-5): 3rem, unos 48 px, arriba y abajo. La clase está marcada !important, así que supera tu Padding superior e inferior. El relleno izquierdo y derecho aún funcionan.
  • Las clases de espaciado ganan. Cualquier clase de espaciado Bootstrap bajo HTML classes, como Top margin size 3 (mt-3), supera tu valor en el mismo lado.
  • Las columnas conservan un hueco. Bootstrap da a cada columna 12 px de relleno a izquierda y derecha. El Padding izquierdo o derecho en una Column lo reemplaza, así que el contenido ya no se alinea con la columna siguiente.
  • Los párrafos conservan su propio espaciado. Tu tema pone espacio bajo cada párrafo y encabezado. El modelo de caja no cambia ese espacio, porque actúa sobre el elemento como un todo.
  • Los márgenes de vecinos suelen solaparse. Cuando un elemento queda sobre otro, el margen inferior del primero y el superior del segundo comparten el hueco. El mayor gana; no se suman.

Si no lo ves

  • El relleno superior o inferior en una sección no hace nada. La clase Vertical padding size 5 (py-5) gana. Quita su chip bajo HTML classes.
  • Un valor de margen o relleno no hace nada. Una clase de espaciado Bootstrap en el mismo lado gana. Quita su chip, o usa solo la clase.
  • El relleno no se muestra. El elemento no tiene fondo ni borde, así que el espacio es invisible. Elige un color Background mientras lo ajustas.
  • El valor saltó a 200. El relleno y el margen se detienen en 200, el borde en 50. Usa un valor menor, o un porcentaje.
  • La página queda apretada en teléfonos. El mismo valor en píxeles aplica en cada pantalla. Usa valores menores, un porcentaje, o clases adaptables.
  • Los dos huecos no se sumaron. Los márgenes apilados se solapan y el mayor gana. Pon todo el hueco en uno de los dos elementos.
  • Las columnas ya no se alinean. El Padding lateral en una Column reemplazó el hueco de la cuadrícula. Vacía esos lados de nuevo.

¿Qué sigue?