html - 为什么我的内联 block 跨度不继承高度？

Question

我的子元素的 height 为 20px 和以下 CSS:

display: inline-block;
text-align: right;
width: 67px;
height: inherit;

父元素的高度为47px。

为什么我的元素没有继承这个高度？

---

HTML

<div class='tango-directive-template'>

<div class='tango level-{{ level }}'>
  <span class='left-icons'>
    <img
      ng-show='tango.children.length > 0'
      src='/assets/images/show-arrow.png'>
    <span class='author'>A</span>
  </span>
  <textarea
    ng-focus='focus = true;'
    ng-blur='focus = false;'
    rows='1'>{{ tango.text }}</textarea>
  <p class='menu' ng-show='focus'>
    <span class='glyphicon glyphicon-indent-left'></span>
    <span class='glyphicon glyphicon-indent-right'></span>
    <span class='glyphicon glyphicon-arrow-down'></span>
    <span class='glyphicon glyphicon-arrow-right'></span.
  </p>
</div>

<tango
  ng-repeat='subtango in tango.children'
  tango='subtango'
  level='{{ +level + 1 }}'>
</tango>

</div>

CSS

.tango-directive-template .tango {
  margin-bottom: 20px;
}
.tango-directive-template .tango .left-icons {
  display: inline-block;
  text-align: right;
  width: 67px;
  height: inherit;
}
.tango-directive-template .tango .left-icons img, .tango-directive-template .tango .left-icons .author {
  position: relative;
  bottom: 15px;
  margin-right: 5px;
}
.tango-directive-template .tango .left-icons img {
  height: 20px;
}
.tango-directive-template .tango .left-icons .author {
  border: 1px solid gray;
  border-radius: 25px;
  padding: 10px;
}
.tango-directive-template .tango textarea {
  font-size: 18px;
  width: 700px;
  line-height: 135%;
  padding: 8px 16px;
  resize: none;
  border: 1px solid white;
  overflow: hidden;
}
.tango-directive-template .tango textarea:focus {
  outline: none;
  border: 1px solid gray;
  overflow: auto;
}
.tango-directive-template .tango .menu {
  width: 750px;
}
.tango-directive-template .tango .menu span {
  float: right;
  margin-left: 15px;
  cursor: pointer;
}
.tango-directive-template .level-0 {
  position: relative;
  left: 0px;
}
.tango-directive-template .level-1 {
  position: relative;
  left: 65px;
}
.tango-directive-template .level-2 {
  position: relative;
  left: 130px;
}
.tango-directive-template .level-3 {
  position: relative;
  left: 195px;
}
.tango-directive-template .level-4 {
  position: relative;
  left: 260px;
}
.tango-directive-template .level-5 {
  position: relative;
  left: 325px;
}
.tango-directive-template .level-6 {
  position: relative;
  left: 390px;
}
.tango-directive-template .level-7 {
  position: relative;
  left: 455px;
}
.tango-directive-template .level-8 {
  position: relative;
  left: 520px;
}
.tango-directive-template .level-9 {
  position: relative;
  left: 585px;
}
.tango-directive-template .level-10 {
  position: relative;
  left: 650px;
}

我想要的是当文本区域调整大小时图像垂直居中。

Answer 1

来自MDN docs :

The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.

你在开发者工具里查到的不是计算值，就是所谓的used value不能继承。

要使高度可继承，您需要在父元素上指定它。