Why does vertical-align: middle causes other elements to misalign?

Question

With this code:

.header {
  background-color: #444;
  height: 56px;
  color: white;
}

a {
  padding: 20px;
}

input {
  background-color: #444;
  border: 0;
  line-height: 24px;
  margin-left: 10px;
  color: white;
  height: 56px;
  padding: 0;
  font-size: 20px;
  vertical-align: middle;
}

<div class="header">
  <a href="#">
    <img src="http://directoryapp.trimian.com/img/directory/ic_search_white.png" />
  </a>
  <input placeholder="Search" />
</div>

http://plnkr.co/edit/o6Gh6tARL7Kt1zxNHaFO?p=preview

Why is the image misaligned? If I remove the vertical-align: middle on the input the image lines up fine.

In the chrome inspector the bounding box that is highlighed for the image also doesn't correspond to where it is rendered on the page (the bounding box is correct).

Am I designing the CSS for this header bar wrong?

Answer 1

Applying vertical-align to one element doesn't cause miss-alignment for another element.

If you don't apply the vertical-align then both element (in your example) would be aligned same by the browser. Suppose if browser default is vertical-align: top; then both element is aligned to top. So, you see no miss-alignment between them. But when you use vertical-align: middle to one and leave default for another then browser default alignment and your alignment mismatch. So, you see miss-alignment between them.

To conclude, use vertical-align on both element so that browser will render accordingly.

Answer 2

Apply vertical-align: middle; for the image also..

Answer 3

here is what I would do:

apply same line-height as the height and remove the vertical-align:middle.

here is a snippet:

.header {
  background-color: #444;
  height: 56px;
  color: white;
}
a {
  padding: 20px;
  text-decoration: none;
  line-height: 56px;  /*new */
}
input {
  background-color: #444;
  border: 0;
  line-height: 56px;  /*changed from 24 to 56px */
  margin-left: 10px;
  color: white;
  height: 56px;
  padding: 0;
  font-size: 20px
}

<div class="header">
  <a href="#">
    <img src="http://directoryapp.trimian.com/img/directory/ic_search_white.png" />
  </a>
  <input placeholder="Search" />
</div>