html - 为什么css不会自己继承

Question

我正在尝试设计一个简单的网站。我在使用 css 时遇到了麻烦，尤其是在继承方面。我的目标是让侧边菜单和里面的元素一个接一个地放在另一个下面:

#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>

这段代码完成了工作，但我要问的是为什么我必须在标签 <span class=left-menu-navbar"> 中显式声明css 属性作为显示并明确声明方向？我希望从父级(left-menu)继承它，但这并没有发生......

Answer 1

why I have to explicitly declare in tag css properties as display and explicitly declare direction?

简单的答案是:

Not all CSS properties are inherited, because it doesn’t make sense for some of them to be. For instance, margins are not inherited, since it’s unlikely that a child element should need the same margins as its parent. In most cases common sense will tell you which properties are inherited and which aren’t, but to be really sure you need to look up each property in the CSS 2.1 specification property summary table.

来源:https://www.w3.org/wiki/Inheritance_and_cascade