1
resposta

[Dúvida] 0px de padding no superior e inferior mas o exemplo consta 24px?

Fiquei confusa. Acho possível ser muito claro e eu só ter perdido algo mas não tá fazendo sentido para mim neste exato momento. Por mais que o título já conste padding, não está efetuando com o texto em body. (ver segunda imagem) Insira aqui a descrição dessa imagem para ajudar na acessibilidade:

1 resposta

Oi, Ligia! Como vai?

Você trouxe uma dúvida super válida — e ela acontece bastante mesmo quando começamos a usar o auto layout com mais controle.

O que está acontecendo é o seguinte:

Mesmo que o bloco do título tenha padding, o bloco de texto (body) precisa também respeitar seu próprio padding, para que o conteúdo não fique desalinhado visualmente. O auto layout não compartilha padding entre blocos diferentes, então cada parte da interface precisa definir seus próprios respiros internos.

Veja este exemplo para entender melhor:


 Modal (padding: 0)
 ┣ Título (padding: 24px)    espaçamento interno só nesse bloco
 ┣  Texto (padding: 0 top/bottom, 24px left/right)  precisa declarar também
 ┗  Botões (padding: 24px)

Se o body (o texto explicativo) não tiver padding próprio, ele vai colar na borda esquerda, mesmo que o título acima tenha um espaçamento. Isso pode passar a impressão de que o padding do título "deveria estar valendo pra tudo", mas não está, porque cada bloco funciona de forma independente.

Então pra resumir:

  • Cada container com auto layout cuida do seu próprio padding.
  • O alinhamento visual entre título, texto e botões só acontece se todos tiverem as mesmas margens internas na esquerda e na direita.
Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!