Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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
Posted by 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
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,965 Points
Matthew Carson
Matthew Carson
5,965 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.

john larson
john larson
16,594 Points

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.

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

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

john larson
john larson
16,594 Points

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.