为什么我的内联块跨度不继承高度？

Question

我的子元素的height为20px并具有以下CSS：

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

父元素的height为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文档 ：

inherit CSS值使指定了该元素的元素从其父元素中获取属性的计算值 。 每个CSS属性都允许使用。

您在开发人员工具中检查的不是计算值，而是无法继承的所谓的使用值 。

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