Why does the default styling on a HTML5 <progress> bar have vertical-align?

Question

The default stylesheet for Webkit puts the vertical alignment on a <progress> element to be -0.2em. Why -0.2em rather than 0?

Answer 1

Interesting question. According to vertical-align documentation when the value is specified as a length then it

Aligns the baseline of the element at the given length above the baseline of its parent.

By default the height of the progress element defined as 1em. This means that making it -0.2em ensures that progress bar stays perfectly alligned vertically with adjacent inline/inline-block elements.

var progress = document.querySelector('progress');
setInterval(function() {
  progress.classList.toggle('va0');
}, 2000);

body {
  font-size: 2em;
}
progress {
  width: 200px;
}
.va0 {
  vertical-align: 0;
}
div:after {
  position: absolute;
  top: 50px;
  content: '<progress> vertical-align: -0.2em';
}
.va0 ~ div:after {
  content: '<progress> vertical-align: 0';
}

<progress></progress> Some text.
<div></div>

Try making progress bar vertical-align: 0 and you will see that it no longer looks nice next to its inline neighbors.