How to align a button over top of a text input? [duplicate]

Question

Here's what I've got:

HTML

<div class="combobox">
    <input type="text" value="" name="brand" class="text" id="brand">
    <span class="dropdown_btn"></span>
</div>

CSS

.combobox {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.combobox input {
    height: 20px;
    line-height: 20px;
    margin: 0;
    padding: 0;
}
.combobox .dropdown_btn {
    width: 18px;
    height: 20px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
}

But it comes out like this:

I don't know where the gap is coming from; why isn't the text input snug against its container div like the blue button is?

Answer 1

Try setting the vertical-align:top to input

http://jsfiddle.net/KDN8s/4/

.combobox {
    margin: 0;
    padding: 0;
}

.combobox input {
    margin: 0;
    padding: 0;
    height: 20px;
    vertical-align: top;
}

.combobox .dropdown_btn {
    width: 20px;
    height: 24px;
    margin-left: -20px;
    display: inline-block;
    cursor: pointer;
    background-color: blue;
}

<div class="combobox">
    <input type="text" value="" name="brand" class="text" id="brand">
    <span class="dropdown_btn"></span>
</div>