Why do buttons without text have different vertical alignment? - html

Question

I have the following form that I want to customize.
<form>
<input type="text" value="" />
<button></button>
</form>
I want the button to have a background image and no text.
The problem is that the button loses its vertical alignment when I don't write any text into it.
Can someone explain this behaviour?
input {
width: 200px;
height: 20px;
border: 1px solid #0066cc;
border-radius: 20px;
padding: 0;
}
button {
margin-left: -30px;
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 19px;
height: 19px;
padding: 0;
}
<form>
<input type="text" value="" />
<button></button>
</form>
<form>
<input type="text" value="" />
<button>Some text</button>
</form>

Answer 1

Because they have a default vertical-align property of baseline, which alignes inline elements according to the bottom of the element's content (the text).
If there is no content, the vertical alignment cannot be based upon it, instead it is based on the bottom of the element.
You can fix this with a non-breaking space, or by changing the vertical alignment.
<form>
<input type="text" value="" />
<button> </button>
</form>
JSFiddle
-- Or --
button {
margin-left: -30px;
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 19px;
height: 19px;
padding: 0;
vertical-align:middle;
}
JSFiddle
A good read:
All you need to know about vertical-align - Christopher Aue

Answer 2

If you add the vertical-align indicator to the button it should help it move to the position you want, it will need a little bit of extra margin just to push it up a bit though.
Try this out:
input {
width: 200px;
height: 20px;
border: 1px solid #0066cc;
border-radius: 20px;
padding: 0;
}
button {
margin-left: -31px;
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 19px;
height: 19px;
padding: 0;
vertical-align: bottom;
margin-bottom: 1px;
}
<form>
<input type="text" value="" />
<button></button>
</form>

Answer 3

This seems to be a matter of vertical alignment because the elements are inline-(block?)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
input {
width: 200px;
height: 20px;
border: 1px solid #0066cc;
border-radius: 20px;
vertical-align: top;
}
button {
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 20px;
height: 20px;
border: 1px solid red;
vertical-align: top;
}
<form>
<input type="text" value="" />
<button></button>
</form>