--- url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/espacamento' title: 'Adicione espaço dentro e à volta dos elementos | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:13:31+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Dê espaço ao texto dentro de uma caixa colorida, ou afaste um botão do parágrafo por cima dele. Padding é o espaço dentro da margem de um elemento; margin é o espaço fora dela. Define ambos no modelo de caixa no topo do painel Style. O seu tema e uma secção nova trazem o seu próprio espaçamento; esta página mostra como o seu se encaixa. O vídeo dá a um botão uma margem 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: 'Adicione espaço dentro e à volta dos elementos' description: |- Dê espaço ao texto dentro de uma caixa colorida, ou afaste um botão do parágrafo por cima dele. Padding é o espaço dentro da margem de um elemento; margin é o espaço fora dela. Define ambos no modelo de caixa no topo do painel Style. O seu tema e uma secção nova trazem o seu próprio espaçamento; esta página mostra como o seu se encaixa. O vídeo dá a um botão uma margem 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-24T14:13:31+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/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/espacamento' articleSection: 'Estilizar os elementos' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/espacamento' description: |- Dê espaço ao texto dentro de uma caixa colorida, ou afaste um botão do parágrafo por cima dele. Padding é o espaço dentro da margem de um elemento; margin é o espaço fora dela. Define ambos no modelo de caixa no topo do painel Style. O seu tema e uma secção nova trazem o seu próprio espaçamento; esta página mostra como o seu se encaixa. O vídeo dá a um botão uma margem superior de 24 px. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Criar páginas](/pt-pt/hc/documentation/learn-dxpr-builder/build) /[Estilizar os elementos](/pt-pt/hc/documentation/learn-dxpr-builder/element-settings) # Adicione espaço dentro e à volta dos elementos. Aprender DXPR BuilderCriar páginasEstilizar os elementos ## Neste guia Guias relacionados - [Altere o tamanho e a cor do texto](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia) Dê espaço ao texto dentro de uma caixa colorida, ou afaste um botão do parágrafo por cima dele. Padding é o espaço dentro da margem de um elemento; margin é o espaço fora dela. Define ambos no modelo de caixa no topo do painel **Style**. O seu tema e uma secção nova trazem o seu próprio espaçamento; esta página mostra como o seu se encaixa. O vídeo dá a um botão uma margem superior de 24 px. ## Antes de começar - Abra a página no DXPR Builder; apontar para um elemento mostra a barra de controlos com **More**. Novo no construtor? Veja [Crie a sua primeira página](/pt-pt/hc/documentacao/aprender-dxpr-builder/primeiros-passos/primeira-pagina). - **Save** no diálogo mantém uma alteração no editor. **Save** na barra de ferramentas do construtor por cima do conteúdo guarda a página e mostra "Saved field". - **Use o modelo de caixa** para corrigir um espaço numa página. - **Use o seu tema ou uma classe** para espaçamento que se repete, como o intervalo entre todas as secções. - **Mantenha uma escala.** As páginas parecem calmas quando cada espaço vem de poucos tamanhos: | Tamanho | Use-o para | |---|---| | 8 px | Pequenos espaços dentro de um grupo, como um ícone e o seu rótulo | | 16 px | Entre itens relacionados | | 24 px | Entre blocos de conteúdo | | 32 px | Dentro de um cartão ou caixa em destaque | | 48 px | Entre secções | ## Receita: espaço à volta de um botão 1. Paire o cursor sobre o **Button**, clique em **More** e depois em **Settings**. 2. Abra o painel **Style** e clique no lado superior de **Margin**, o anel exterior do modelo de caixa. Os cadeados começam abertos, por isso só este lado muda. 3. Verifique se o botão de unidade mostra **PX**. Escreva 24 no campo de valor e prima Enter. O lado passa a dizer 24px e o botão desce. 4. Clique em **Save** no diálogo e depois em **Save** na barra de ferramentas. Num Button a margem vai no próprio botão, por isso o espaço começa mesmo na sua margem. ## Receita: uma secção mais alta Uma secção nova recebe preenchimento superior e inferior da classe **Vertical padding size 5 (py-5)**, que vence o modelo de caixa. Remova primeiro essa classe. Verifique se o título do diálogo diz Section, não Row nem Column. 1. Paire o cursor sobre a **Section**, clique em **More** e depois em **Settings**. 2. No painel **General**, encontre **HTML classes** e clique no × da amostra **Vertical padding size 5 (py-5)**. A secção perde algum espaço no topo e no fundo. Se não houver essa amostra, salte este passo. 3. Abra o painel **Style**. Clique no lado superior de **Padding**, escreva 96 e prima Enter. 4. Faça o mesmo para o lado inferior de **Padding**. Ambos os lados passam a dizer 96px e a secção cresce em altura. 5. Clique em **Save** no diálogo e depois em **Save** na barra de ferramentas. ## O que vê Cada lado que definir mostra o valor no modelo de caixa, como 24px. O botão fica 24 px mais abaixo, e a secção tem 96 px de espaço por cima e por baixo do conteúdo. ## Como funciona o modelo de caixa ```text +----------------- Margin ------------------+ | +-------------- Border ---------------+ | | | +----------- Padding ------------+ | | | | | | | | | | | width × height | | | | | | | | | | | +--------------------------------+ | | | +-------------------------------------+ | +-------------------------------------------+ ``` - Cada anel tem quatro lados. Um lado mostra o valor, como 24px, ou "-" quando não está definido. - Clique num lado para abrir um pequeno seletor com cursor, campo de valor e botão de unidade. A unidade é **PX** ou **%**; **Border** só aceita px. - Escreva um valor e prima Enter, ou arraste o cursor. As setas para cima e para baixo mudam o valor em 1. Escape fecha o seletor. - Para limpar um lado, esvazie o campo de valor e prima Enter. O lado mostra "-" e o seu tema decide de novo. Margin vai de -200 a 200, padding de 0 a 200 e border de 0 a 50. Width e height vão de 0 a 2000. Uma margem negativa puxa o elemento para o vizinho. Um valor escrito fora do intervalo é cortado para o limite mais próximo. ### Os cadeados Cada anel tem um cadeado junto ao nome: **Margin**, **Border** e **Padding**. Quando o cadeado está fechado, um valor definido num lado passa para os quatro. Quando está aberto, cada lado mantém o seu valor. Fechar o cadeado não muda os valores que já tem; só o próximo valor definido é copiado. ### Percentagem, tamanho e largura de ecrã Um valor em percentagem é uma parte da largura do elemento pai, também no topo e no fundo. Por isso 10% de preenchimento superior é mais alto numa coluna larga que numa estreita. O meio do modelo de caixa contém width × height. Elementos que se dimensionam sozinhos, como Image e Map, ignoram essas duas caixas. O modelo de caixa não tem valores por tamanho de ecrã. Para mais preenchimento em ecrãs grandes que nos telemóveis, use classes Bootstrap. Por exemplo, `py-3 py-lg-5` dá 16 px em ecrãs mais pequenos e 48 px a partir de 992 px de largura. Veja [HTML ID and classes](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/css-personalizado) para saber como as escrever. ## Como os seus valores se encontram com o espaçamento do tema - **Secções novas trazem preenchimento.** Uma secção que adiciona no editor recebe a classe **Vertical padding size 5 (py-5)**: 3rem, cerca de 48 px, no topo e no fundo. A classe está marcada como `!important`, por isso vence o seu **Padding** superior e inferior. O preenchimento esquerdo e direito continua a funcionar. - **As classes de espaçamento ganham.** Qualquer classe de espaçamento Bootstrap em **HTML classes**, como **Top margin size 3 (mt-3)**, vence o seu valor no mesmo lado. - **As colunas mantêm um intervalo.** O Bootstrap dá a cada coluna 12 px de preenchimento à esquerda e à direita. O **Padding** esquerdo ou direito numa Column substitui-o, por isso o conteúdo deixa de alinhar com a coluna seguinte. - **Os parágrafos mantêm o próprio espaçamento.** O seu tema põe espaço por baixo de cada parágrafo e título. O modelo de caixa não muda esse espaço, porque atua sobre o elemento como um todo. - **As margens de vizinhos costumam sobrepor-se.** Quando um elemento fica por cima de outro, a margem inferior do primeiro e a margem superior do segundo partilham o espaço. A maior ganha; não se somam. ## Se não o vir - **O preenchimento superior ou inferior numa secção não faz nada.** A classe **Vertical padding size 5 (py-5)** ganha. Remova a amostra em **HTML classes**. - **Um valor de margem ou preenchimento não faz nada.** Uma classe de espaçamento Bootstrap no mesmo lado ganha. Remova a amostra ou use só a classe. - **O preenchimento não aparece.** O elemento não tem fundo nem bordo, por isso o espaço é invisível. Escolha uma cor de **Background** enquanto o ajusta. - **O valor saltou para 200.** Padding e margin param nos 200, border nos 50. Use um valor mais pequeno ou uma percentagem. - **A página está apertada nos telemóveis.** O mesmo valor em píxeis aplica-se em todos os ecrãs. Use valores mais pequenos, uma percentagem ou classes responsivas. - **Os dois espaços não se somaram.** Margens empilhadas sobrepõem-se e a maior ganha. Ponha todo o espaço num dos dois elementos. - **As colunas deixaram de alinhar.** O **Padding** lateral numa Column substituiu o intervalo da grelha. Esvazie de novo esses lados. ## E a seguir? - [Altere o tamanho e a cor do texto](/pt-pt/hc/documentacao/aprender-dxpr-builder/definicoes-de-elementos/tipografia): dê tamanho e cor ao texto dentro da sua caixa espaçada.