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

Silvia Biurrun
Silvia Biurrun
558 Points

at 3:30 mark in video, Guil changed list items to disply:block. Why didn't this cause them to go back to vertical?

Hi, at 3:30 mark in video, Guil changed list items to disply:block. Why didn't this cause them to go back to vertical?

Nouh Ahmed
Nouh Ahmed
7,085 Points

I changed the display property of the .name a and main-nav anchors to block and they lined up top of each other.

2 Answers

Matthew Carson
Matthew Carson
5,963 Points

It looks like he changed the anchor tags within the nav to display:block;

A block level element stretches out to fill all of its available space, which the <a> tag does. It stretches out to fill in the <li> tag.

But those anchor tags themselves are contained within <li> elements that are inline-block, which keeps them in a line

So you're seeing inline <li>s that have block level <a> inside them.

If you were to remove the inline-block display property of the <li> tags they would go vertical like you were expecting.

Hey Matthew, that makes perfect sense!. If this was my question I'd give you a best answer. I don't suppose you know python, cause I have a question posted. No ones touched it yet.

I thought I could answer your question but after watching the video...I have no idea. I can't wait to find out why myself now

I opened up workspaces and changed that line to block like Guill, and they lined up on top of each other just like you would expect. So I have no idea what's up with that. Good catch on your part.