Adicione espaço dentro e à volta dos elementos.

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.
• 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:

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

+----------------- 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 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: dê tamanho e cor ao texto dentro da sua caixa espaçada.