为什么HTML5上的默认样式 <progress> 吧有垂直对齐？

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.