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

Shaun Glassman
Shaun Glassman
6,496 Points
Posted by Shaun Glassman
Shaun Glassman
6,496 Points

Questions about inheritance

So in this example, when we take the main-nav class, which is part of the ul element, we have to specify that the li elements would be inline block and we can't just say that the .main-nav class is inline block and expect that the li elements inherit the inlineblock.

However, when we add text-align: center; to the .main-header, the list items inherit the text-align: center; property.

Why would the center alignment get inherited in this instance, when inline block doesn't get inherited?

2 Answers

Lindsay Sauer
Lindsay Sauer
12,029 Points

Hi Shaun,

This is because the User Agent Stylesheet has default settings specifically set for li elements, which makes that styling have more specificity than if you were to just use the class .main-nav.

To see an explanation of specificity, this is a good resource, and this one describes it in Star Wars terms.

ywang04
ywang04
6,762 Points
ywang04
ywang04
6,762 Points

The same question has been discussed before.

In a nut shell, the display property is not inherited in CSS.