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

Zay Myo Tun
Zay Myo Tun
5,030 Points

inline-block UL is moving down along side with inline-block h1 after adding 50px top margin to h1

Hi I am kind of wondering why is inline-block UL is moving down along side with h1 element (both inline-block) after adding 50px top margin to h1 . Does it mean inline-blocks move together when they are lineup ?

Annet de Boer
Annet de Boer
900 Points

No it does not mean inline-blocks move together. What do you want to achieve though? You want them to overlay? Or keep them closer together?

Zay Myo Tun
Zay Myo Tun
5,030 Points

thanks for your answer. I just want to know when I add margin to logo(h1), it moved down and the inline-block element navigation bar also moved down and aligned with logo. navigation bar doesn't have a margin so, it should stay where it was. I can't think of reason why it still stay aligned with logo.

Annet de Boer
Annet de Boer
900 Points

It would help if you copy paste the relevant html part and your css file, or a link to where it can be found so we can take a look. it's difficult without seeing the code :-)

Annet de Boer
Annet de Boer
900 Points

Ah I see what you mean. I don't really know how this can be explained :-\
I would expect only the name would move lower, not the navbar, just like you expected. Hopefully someone else knows the answer