Why does the default style in the HTML5 <progress> panel have vertical alignment?

Question

The default stylesheet for Webkit sets the vertical alignment in the <progress> element to -0.2em. Why is -0.2em and not 0?

Answer 1

Interest Ask. According to the vertical-align documentation , when a value is specified as length, then it

Aligns the baseline of an element with a given length above the baseline of its parent.

By default, the height of the progress element is defined as 1em . This means that creating -0.2em ensures that the progress bar stays fully aligned vertically with neighboring inline / inline blocks.

 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 the progress bar vertical-align: 0 and you will see that it no longer looks beautiful next to its built-in neighbors.