图像与其他组件不在一行中

Question

我知道html中的对齐有时很复杂。但这对我来说是困惑的。我有div文本，按钮和图像，没有其他选项。

<div class="div-filter">

 <input type="text" value="Hladaj"/>
 <input type="submit" value="Hladaj"/>
 <img alt="image" id = "ShowOrHideImage" />     

为什么图像的cca高5倍？没有图像，文本和按钮上没有填充。当我把图像放在那里.....

要明确：

<style>
.div-filter
{
    background-color:rgb(235, 235, 98);
    width:100%;        
    border-bottom-width: 1px;   
    border-top-width: 1px;  
    border-left-width: 1px;  
    border-right-width: 1px; 
    border-bottom-color: black;   
    border-top-color: black;  
    border-left-color: black;  
    border-right-color: black;  
    border-bottom-style: solid;   
    border-top-style: solid;  
    border-left-style: solid;  
    border-right-style: solid;  
}

我可以用table和tableRow解决它，但这对我不好。

Answer 1

这是因为图像与字体基线对齐。

您可能想要添加该规则：

.div-filter img {
    vertical-align: bottom;
}

http://jsfiddle.net/QgBcU/