Margin, padding e border
Um card 'espremido', sem respiro nenhum entre o texto e a borda, é o sintoma mais comum de quem ainda não domina o modelo de caixa.
Estudar esta lição interativa →Todo elemento na tela, sem exceção, é uma caixa retangular, mesmo quando parece redondo ou irregular por cima. Entender essa caixa, e as camadas de espaço ao redor dela, é a base de praticamente todo ajuste visual fino que você vai fazer daqui pra frente.
Pense num quadro pendurado na parede. A moldura é a borda (border), o espaço entre a foto e a moldura é o padding (espaçamento interno), e o espaço entre o quadro e os outros quadros na parede é o margin (espaçamento externo). Mudar o padding aproxima ou afasta a foto da moldura; mudar o margin aproxima ou afasta o quadro dos vizinhos, sem tocar na moldura nem na foto.
O modelo de caixa em quatro camadas, de dentro para fora: content (o conteúdo em si), padding (o respiro interno), border (a moldura) e margin (o espaço externo, até o próximo elemento).
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. padding empurra o conteúdo para dentro da borda; margin empurra a caixa inteira para longe de tudo ao redor.
Um exemplo de produto real: os cartões de produto de qualquer loja on-line usam padding generoso para dar respiro entre a foto/preço e a borda do cartão, e margin entre um cartão e o próximo, para que a grade inteira não pareça uma pilha grudada de retângulos.
padding: 10px 20px; define 10px em cima/embaixo e 20px nos lados; padding: 10px 20px 5px 15px; vai no sentido horário a partir do topo (cima, direita, baixo, esquerda). Escrever padding-top, padding-right etc. separadamente também funciona, mas a forma abreviada é mais comum no dia a dia.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste margin e padding.