Ao definirmos uma margin ou padding podemos optar por usar uma sintaxe abreviada, como por exemplo:
padding: 2.50rem 0 2rem 0;
Onde representa respectivamente os valores de top, right, bottom e left .
Ou de uma maneira tradicional:
padding-top: 2.50rem;
padding-bottom: 2rem;
Acompanhado o curso até este momento eu optei por usar abreviado e me deparei com um problema.
Um cuidado que devemos ter é que se formos importar mais de um arquivo css no nosso html, conforme no curso onde tem um para cada seção, pode haver sobrescrita no código.
Como aconteceu comigo. No arquivo base.css na classe .container foi definido um padding right e left de 6%, e no arquivo destaques.css na classe .destaques eu havia definido o padding abreviado
padding: 2.50rem 0 2rem;
e como estamos usando as duas classes juntas na mesma seção, e na tag head o arquivo destaques.css foi importado depois do arquivo base.css, houve uma sobrescrita.
Demorou um tempo até eu perceber por que o padding right e left não estava sendo aplicado igual ao da aula.
Fica a dica se for importar mais de um arquivo css optar pela maneira mais 'tradicional' para definirmos essas propriedades.