Why isn't my inline-block span inheriting height?

Question

My child element has a height of 20px and the following CSS:

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

The parent element has a height of 47px .

Why isn't my element inheriting this height?

---

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;
}

What I want is for the images to be centered vertically when the textarea resizes.

Answer 1

From the 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.

What you check in your developer tools is not the computed value, it is the so-called used value which cannot be inherited.

To make a height inheritable, you need to specify it on the parent element.