Você adicionou 30px de margin-bottom a um elemento, e ao elemento abaixo dele 20px de margin-top. Você esperava uma distância de 50px entre ambos os elementos, mas no final ficou com apenas 30px. Por que isso acontece?
See the Pen margin by André | Origamid (@origamid) on CodePen.
Margin top e bottom de elementos adjacentes vão sempre colidir, salvo quando estes elementos estiverem com float. O tamanho que prevalece é sempre o maior, então no caso de margin-bottom: 40px; e margin-top: 30px; o tamanho que irá prevalecer é de 40px de distância entre um elemento e outro.
Vale lembrar que essa é uma característica apenas do top e bottom, não de left e right que não colidem.