image appears higher than input

Question

i have a image that is suppose to be next to a input here is the code:

<style type="text/css">
#post_comments{
    margin-top:1px;
    max-width: 568px;
    border: 1px solid #eee;
}
.comments{
    text-align: center;
    background: #eee;
    color:#555;
    max-width: 568px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
}
.comments:hover{
    color: #333;
}
.make_comment{
    margin-top: 0px;
    margin-bottom: 2px;  
    width: 400px;
    height: 25px;
}
</style>
<div id="post_comments">
    <div class="comments">
        <img src="/elitequorum/images/image.jpg" style="margin-top: 2px;" width="35" height="35">
        <input placeholder="Make a comment...." type="text" class="make_comment">
    </div>
</div> 

can you guys help me align the image and the input together so that the image wont be higher then the input? thanks.

Answer 1

The image is automatically aligned to the top. Try adding this to the input css:

vertical-align:top;

Answer 2

In CSS use:

<style type="text/css">
#post_comments{
    margin-top:1px;
    max-width: 568px;
    border: 1px solid #eee;
}
.comments{
    text-align: center;
    background: #eee;
    color:#555;
    max-width: 568px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    vertical-align:top;
    margin-top: 10px;
}
.comments:hover{
    color: #333;
}
.make_comment{
    margin-top: 5px;
    margin-bottom: 2px;  
    width: 400px;
    height: 25px;
}
</style>

In HTML use:

<div id="post_comments">
    <div class="comments">
        <img src="/elitequorum/images/image.jpg" style="margin-top: 2px;vertical-align:top;" width="35" height="35">
        <input placeholder="Make a comment...." type="text" class="make_comment" >
    </div>
</div> 

Hope it helpful to You...