Olá, Nick, como vai?
Sua pergunta é excelente e aborda um ponto crucial no aprendizado de CSS. É comum ter essa dificuldade, pois muitas propriedades podem gerar resultados visuais semelhantes, mas a forma como cada uma se comporta é diferente e impacta a manutenção do código.
A escolha de propriedades como padding
e text-align
ou height
e align-items
depende do contexto e da intenção do layout. No exemplo da aula, o objetivo era alinhar o texto dentro de um contêiner. Usar padding
e text-align
é uma abordagem mais flexível. O padding
cria um espaço interno que se adapta ao conteúdo, enquanto o text-align
centraliza o texto horizontalmente. Já a combinação de height
com align-items
é mais comum em layouts flexbox, onde você quer alinhar itens verticalmente dentro de um contêiner com altura fixa. A diferença principal é que o padding
afeta o "preenchimento" interno, e a height
define um tamanho fixo para o elemento.
Em relação à altura do rodapé, ao definir a altura por meio de padding
, o elemento se ajusta dinamicamente ao conteúdo, garantindo que o layout não "quebre" caso o texto aumente. Se você define height: 80px
, essa altura será fixa, e se o conteúdo (o texto) for maior que 80px, ele pode transbordar ou ser cortado. No caso da aula, o padding
é utilizado para criar um "respiro" em torno do texto.
A escolha da propriedade está ligada à forma como você quer que seu componente se comporte em diferentes situações. Com a prática, você começará a identificar qual propriedade é a mais adequada para cada cenário, buscando sempre a solução mais flexível e robusta.
Espero ter ajudado.
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)
Caso este post tenha lhe ajudado, por favor, marcar como solucionado