Why are my div margins overlapping and how can I fix it?

Question

I don\'t understand why the margins of these divs are overlapping.

Answer 1

Margins, in contrary to padding (which pads a specific width) is a “do this as a minimum distance”.

It won’t put that distance to all elements.

As you can see, the get in touch block bottom margin is marged to the input box. That is the margin active here. The other margin, top margin from the input, is not in effect, as it’s smaller and does not reach a block-element where it would actually push back the element. The 2 margins overlap and don’t affect one another.