为什么HTML5 <progress>栏上的默认样式具有vertical-align？</progress>

Question

Webkit的默认样式表将<progress>元素的垂直对齐方式设置为-0.2em。为什么-0.2em而不是0？

Answer 1

有趣的问题。根据{{​​1}} documentation，当值指定为长度时，则

  

将给定长度的元素基线与其父元素的基线对齐。

默认情况下，vertical-align元素的高度定义为progress。这意味着使其成为1em可确保进度条与相邻的内联/内联块元素保持完美对齐。

-0.2em

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>，您会发现它的内联邻居旁边看起来不再好看了。