The browser implementation is that when the parent has no content and the child requests for margin, the parent is brought down instead of child going down.   The solution for these are listed below with their side effects.    floats , You  have  to float elements  border-top , This pushes the parent at least 1px downwards which should then be adjusted with introducing  -1px  margin to the parent element itself. This can create problems when parent already has  margin-top  in relative units.  padding-top , same effect as using  border-top  overflow: hidden , Can't be used when parent should display overflowing content, like a drop down menu  overflow: auto , Introduces scrollbars for parent element that has (intentionally) overflowing content (like shadows or tool tip's triangle)    See the Pen Relative with Margin  by Manikanta ( @immnk ) on CodePen .      
I write in my blog all those contents which I find interesting and amazing.