--- url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/espaciado' title: 'Añade espacio dentro y alrededor de los elementos | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:11:44+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Añade espacio dentro y alrededor de los elementos' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:11:44+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/espaciado' articleSection: 'Da estilo a tus elementos' - '@type': WebPage '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/espaciado' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://dxpr.com/es' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: es --- [Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Da estilo a tus elementos](/es/hc/documentation/learn-dxpr-builder/element-settings) # Añade espacio dentro y alrededor de los elementos. Aprende DXPR BuilderCrear páginasDa estilo a tus elementos ## En esta guía Guías relacionadas - [Cambia el tamaño y el color del texto](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/tipografia) 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](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina). - **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. ## 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. ## Lo que ves 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 ```text +----------------- 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](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/css-personalizado) 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? - [Cambia el tamaño y el color del texto](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/tipografia): dimensiona y colorea el texto dentro de tu recuadro espaciado.