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

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

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,748 Points

The same question has been discussed before.

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