css - 图像与其他组件不在一条直线上

Question

我知道对齐有时在 html 中很复杂。但这里有一些让我困惑的事情。我有带有文本、按钮和图像的 div，没有其他选项。

<div class="div-filter">

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

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

要清楚:

<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/