CSS Margins not working with block-elements

Question

It seems that margins are not being respected by my block-level elements. I'm unable to solve this issue without converting the block-level elements to inline-block - which I don't want to do - why would I? They should be block :P

Code @ Plunker: http://embed.plnkr.co/oRMieH

Any help would be appreciated.

Answer 1

The answer is that the vertical margins are collapsing. You can read about it, or you can just put double margin-bottom on the top element and forget the margin-top. I only use margin-bottom because when building small screen first, the need for margin-top is very rare for me.

http://css-tricks.com/almanac/properties/m/margin/

Answer 2

It has to do with position: absolute; It creates it's own layer and can't work with margins. You could try position: relative;