sobre o uso da margin:20px 0 40px;

Thiago, a propriedade margin pode ser definida com 1, 2, 3 ou 4 valores ficando assim:

• Quando apenas um valor é especificado a mesma margem é aplicada para todos os lados;

margin: 5px;

/*Será aplicado um espaçamento externo de 5px em todos os lados do elemento*/

• Quando dois valores são definidos, o primeiro valor corresponde as margens superior e inferior e os dois últimos correspondem as margens laterais

margin: 5px 10px;

/*Será aplicada uma margem de 5px no topo e 5px inferior e uma margem de 10px em cada lateral */

• Quando são definidos três valores, a primeira margem é aplicada ao topo, a segunda aos lados esquerdo e direito, e a terceira ao lado inferior.

margin: 5px 10px 8px;

/*Será aplicada uma margem de 5px no topo, uma margem de 10px em cada lateral e uma margem de 8px abaixo */

• Quando todos os quatro valores são definidos, as margens são aplicadas superior, direito, inferior e esquerdo, nesta ordem.

margin: 5px 10px 9px 8px;

/*Será aplicada uma margem de 5px no topo, uma margem de 10px na lateral direita, uma margem de 9px abaixo e por fim uma margem de 8px abaixo  */

Para facilitar seu entendimento, quando forem definidos os quatro valores, basta seguir no sentido horário, o primeiro valor (12h) é o superior, o segundo (3h) é o da direita, o terceiro (6h) o inferior e o último (9h) o da esquerda.

Se quiser entender melhor pode acessar esses links:

https://developer.mozilla.org/pt-BR/docs/Web/CSS/margin

https://www.w3schools.com/css/css_margin.asp

Eu achava que quando não especificava o quarto valor seria o da esquerda somente, ou seja, ficaria como 0 automaticamente. Obrigado por explicar!

Também estava tendo essa dúvida e a resposta do Igor ajudou bastante, muito obrigada!!!