テーブルセルの高さを伸ばす画像

Question

疫病のようなCSSが嫌いです。

私はいくつかのテーブルセルをインラインにしたテーブルヘッダーを持っています。これは、セルの1つに画像を追加しようとするまでは完璧に動作しますが、divの高さが伸びていますが、理由は全く分かりません。

Example of blank table cells working perfectly.

Example of the demon that has been haunting me all day.

.header { 
    display: table; 
    width: 100%; 
    background: white; 
    border-bottom: 2px solid #eeeff3; 
    .burger-menu { 
     width: 75px; 
     margin-left: auto; 
     margin-right: auto; 
     background: url("https://s23.postimg.org/o8wb4i5u3/1484768142_menu_alt.png"); 
     background-size: 30px 30px; 
     background-repeat: no-repeat; 
     height: 30px; 
     width: 30px; 
     cursor: pointer; 
     text-indent: 0px; 
    } 
} 

.outer { 
    display: table; 
    vertical-align: top; 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

.outer-icon { 
    display: table-cell; 
    position: relative; 
    height: 75px; 
    width: 5%; 
    overflow: hidden; 
    border-right: 2px solid #eeeff3; 
    img { 
     height: 100%; 
    } 
} 

.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 

.search-bar { 
    display: table-cell; 
    vertical-align: top; 
    width: 80%; 
    input { 
     height: 75px; 
     border: 0; 
     padding: 0; 
     width: 100%; 
     border-right: 2px solid #eeeff3; 
    } 
} 

.inner { 
    width: 75px; 
    margin-left: auto; 
    margin-right: auto; 
} 

誰もが私の悲惨さから私を置くことができますか？

Answer 1

.outer-iconからheightを削除します。 heightを表のセルに貼り付けるのは良い考えであるとは知らない。 vertical-align: middle;を.search-barと.outer-iconに設定します。

Answer 2

これはadd-friendにdisplayを変更しますが、すべてを解決する場合、私は知らないが、物事を改善するようだ：

.add-friend { 
    background-image: url(https://placeimg.com/75/75/face); 
    width: 75px; 
    height: 75px; 
    display: inherit; <- this here thingy 
} 

https://codepen.io/anon/pen/zNNdYw

Answer 3

私はあなたが.outer-iconに明示的な高さを設定したいとは思いませんあなたはそれに多くの要素をラップしているので、内側のコンテンツを高さに設定する必要があるからです。

.outer-icon { 
    height: 75px; // remove this line!!! 
} 

次に、相対親の​​divの中に絶対ハンバーガーメニューを設定します。

.burger-menu { 
    position: absolute; 
    left: 20px; 
    top: 25px; 
} 

乾杯