Pourquoi css n'hérite pas par ses propres moyens

Question

J'essaie de créer un site web simple. J'ai des problèmes avec css et particulièrement avec l'héritage. Mon but est d'avoir le menu latéral et à l'intérieur des éléments placés les uns sous les autres:

#inner-flex-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 

 
#container { 
 
    display: flex; 
 
} 
 

 
.left-menu-navbar { 
 
    display: inherit; 
 
    flex-direction: column; 
 
} 
 

 
.left-menu { 
 
    display: inherit; 
 
    background: hotpink; 
 
    flex-direction: column; 
 
} 
 

 
.header { 
 
    flex: 1; 
 
    background: tomato; 
 
} 
 

 
.outlet { 
 
    flex: 2; 
 
    background: deepskyblue; 
 
} 
 

 
.footer { 
 
    flex: 1; 
 
    background: lightgreen; 
 
}

<div id="container"> 
 
    <div class="left-menu"> 
 
    <span class="left-menu-navbar"> 
 
     <a routerLink="projects" routerLinkActive="active">Projects</a> 
 
     <a routerLink="upload" routerLinkActive="active">Upload</a> 
 
     <a routerLink="account" routerLinkActive="active">Account</a> 
 
     <a routerLink="create" routerLinkActive="active">Create project</a> 
 
     </span> 
 
    <span>111</span> 
 
    <span>222</span> 
 
    <span>333</span> 
 
    </div> 
 
    <div id="inner-flex-container"> 
 
    <span class="header">MENU COMPONENT</span> 
 
    <div class="outlet"> 
 
     <router-outlet></router-outlet> 
 
    </div> 
 
    <span class="footer">vVVVVVVv</span> 
 
    </div> 
 
</div>

Ce code fait le travail, mais ce que je demande est pourquoi je dois déclarer explicitement dans la balise <span class=left-menu-navbar"> Les propriétés css s'affichent-elles et indiquent-elles explicitement la direction? Je me attends à hériter d'un parent (left-menu) mais ce ne se produit pas ...

Answer 1

pourquoi je dois déclarer explicitement dans la balise propriétés CSS que l'affichage et déclarer explicitement direction?

La réponse est simple:

Toutes les propriétés CSS sont héritées, parce qu'il n'a pas de sens pour certains d'entre eux d'être. Par exemple, les marges ne sont pas héritées, car il est peu probable qu'un élément enfant ait besoin des mêmes marges que son parent . Dans la plupart des cas, le bon sens vous dira quelles sont les propriétés héritées et qui ne le sont pas, mais pour être vraiment certain que vous devez rechercher chaque propriété dans le CSS 2.1 specification property summary table.

Src: https://www.w3.org/wiki/Inheritance_and_cascade