2015-09-05 131 views
0

我的子元素有一個20pxheight下面的CSS:爲什麼我的內聯塊跨度不能繼承高度?

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

enter image description here

父元素具有的47px一個height

enter image description here

爲什麼我的元素繼承這個高度?


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

我想是當textarea的大小調整圖像垂直居中。

enter image description here

+0

嗨,亞當,我編輯你的標題,以優化它的搜索(因爲這個問題是關於繼承比關於一個特定的元素更多)。如果您不喜歡該調整,則只需恢復原始內容即可。 –

+0

@Michael_B我改回來了。原始文件和修訂版都指定了繼承。但原文還指定我正在處理內嵌塊元素,這很重要。 –

回答

3

MDN docs

inherit CSS-值導致對於其被指定爲取屬性的computed value從它的父元素的元素。它是每個CSS屬性允許的。

您在開發人員工具中檢查的內容不是計算值,而是所謂的used value,它不能被繼承。

要使高度可繼承,您需要在父元素上指定