CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Dimitris Karatsoulas
Dimitris Karatsoulas
5,787 Points

Why the change of margin-top property applies both on name and main-nav.

  1. On the 2:05 mark of the video the margin-top property of .name is changed to 50px (line 113 of CSS code), this doesn't only apply on .name but also on .main-nav. They both seem to have the same margin from the top. Why does that happen? Since they are different elements shouldn't they also have different margins?

1 Answer

issa Mohamed
issa Mohamed
7,373 Points

I can only think of it as because .main-nav and .name are both displayed as inline-block meaning inline-block elements are effectively treated as block. Block-level elements respect both horizontal and vertical margins once margin-top is applied to .name that margin spans across the full width of the block taking any inline elements like .main-nav down 50px. As .main-nav is on the same line as .name

Dimitris Karatsoulas
Dimitris Karatsoulas
5,787 Points

Thank you for your response, this does explain that behaviour.