1

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

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

enter image description here

The parent element has a height of 47px.

enter image description here

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.

enter image description here

Adam Zerner
  • 17,797
  • 15
  • 90
  • 156
  • Hi Adam, I edited your title to optimize it for search (since this issue is more about inheritance than about a particular element). If you don't like the adjustment just restore the original. – Michael Benjamin Sep 05 '15 at 12:18
  • @Michael_B I changed it back. Both the original and your revision specify inheritance. But the original also specifies that I'm dealing with an inline-block element, which is important. – Adam Zerner Sep 05 '15 at 14:09

1 Answers1

3

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.

connexo
  • 53,704
  • 14
  • 91
  • 128