Почему мой диапазон встроенных блоков не наследует высоту?

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 docs:

inherit CSS-значение вызывает элемент, для которого он указан принять computed value свойства от родительского элемента. Это разрешено для каждого свойства CSS.

Что вы проверяете в своих инструментах разработчика, это не вычисленное значение, это так называемый used value, который не может быть унаследован.

Чтобы наследовать высоту, вам необходимо указать на родительский элемент.