Editor X: sobre a pilha

O empilhamento é uma ferramenta útil no design responsivo. Sem ele, os elementos colocados acima e abaixo uns dos outros podem se sobrepor quando vistos em telas menores. Quando você empilha elementos, eles são colocados dentro de um contêiner flexível com margens que você pode controlar.

Sites responsivos geralmente contêm elementos que são redimensionados e mudam de posição dependendo do tamanho da tela. Isso pode fazer com que eles se sobreponham ou o espaçamento entre eles pode mudar em janelas de exibição menores.

A pilha coloca seus elementos em um contêiner que se ajusta automaticamente a diferentes tamanhos de tela, para que você possa manter um layout responsivo.

Esse é um exemplo do que acontece com elementos que NÃO ESTÃO empilhados quando a tela é redimensionada:

O empilhamento cria um contêiner flexível em torno de seus elementos, o que garante que eles sempre permaneçam na ordem e no espaçamento corretos. O contêiner é transparente por padrão, mas você pode personalizá-lo para combinar com seu estilo, ao definir a cor de preenchimento, bordas, cantos e sombra.

Os elementos em uma pilha são separados por margens verticais. Para ver as faixas que indicam as margens atuais, passe o mouse sobre ou selecione a pilha. Clique duas vezes nos elementos dentro da pilha e mova-os para alterar o espaçamento entre eles.

Outra opção é igualar todas as margens em altura no painel Inspetor, ao inserir um valor (px ou %) ao lado de Espaçamento de itens.