Question

I know that alignment is sometimes complicated in html. But here is something puzzled for me. I have div with text,button and image with no other options.

<div class="div-filter">

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

Why is image is cca 5px higher? Without image there is no padding over text and button. When I put there image…..

To be clear:

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

I can resolve it with table and tableRow but it is not good for me.

Answer 1

This is because the image gets aligned to the fonts baseline.

You might want to add that rule:

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

http://jsfiddle.net/QgBcU/