Hi Wafaa!
You can read more about margin collapsing behaviour here
The important bit to note:
If there is no border, padding, inline part, block formatting context created, or clearance to separate the
margin-topof a block from themargin-topof one or more of its descendant blocks; or no border, padding, inline content,height, ormin-heightto separate themargin-bottomof a block from themargin-bottomof one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
And from reading about “block formatting context” you can find out that inline-blocks (elements with display: inline-block) create a context which then stops the margin collapse.