How to align divs with input elements of a form?

Question

I want to vertically align 3 divs (that will contain icons) with input fields of a form. Is there any explanation why are form elements acting like they have top margins even after i set it to 0?

<form>
    <div></div>
    <div></div>
    <div></div>
    <input type="text" placeholder="username">
    <input type="password" placeholder="password">
</form>

---

* {
    margin: 0;
    padding: 0;
}
form {
    border: 1px solid black;
    display: inline-block;
}
div {
    display: inline-block;
    height: 32px;
    width: 32px;
    background: red;
}

http://jsfiddle.net/pnW4C/1/

Thank you.

Answer 1

You would add vertical-align:top to the elements in order to solve the alignment issues.

EXAMPLE HERE

div {
    display: inline-block;
    height: 32px;
    width: 32px;
    background: red;
    vertical-align:top;  /* It works because they are inline-block.. */
}

Alternatively, the values middle and bottom would work too. It just needs to be something other than the default value, which is baseline.

If you're wondering why the value baseline was behaving as it was, see this answer.