html - 为什么 progress 元素在高度缩小的情况下仍占据相同的垂直空间？

Question

如果降低 progress 的高度元素，它在视觉上变得更小，但它仍然占据与原始高度相同的空间。

div{
  border: 1px solid blue;
}

Bigger progress, div expands as expected
<div>
  <progress max="100" value="33" style="height:30px"></progress>
</div>
<br/>
Normal progress
<div>
  <progress max="100" value="33"></progress>
</div>
<br/>
Smaller progress, div doesn't shrink. Why?
<div>
  <progress max="100" value="33" style="height:7px"></progress>
</div>

请注意上面代码片段中较小进度上方的空间。它存在的原因是什么？可以删除吗？

我尝试缩小边距、字体大小、行高等，但都没有成功，而且我还没有找到有关此行为的任何信息。

Answer 1

发生这种情况是因为 progress是inline元素，继承line-height来自 parent block在 progress 的上方和下方创建空间,

Such anonymous inline boxes inherit inheritable properties from their block parent box. Non-inherited properties have their initial value.

了解Inline、Inline-block 和Block 级元素之间差异的简短描述。

Inline: An inline element has no line break before or after it, and it tolerates HTML elements next to it.

Inline-block: An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

Block: A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.

在下面的演示中，您可以看到 inline 之间的区别和 block水平元素。

在第一个div ( .inline ) 进度条继承了父 block 的所有属性，除了 background。和 margin (这两个适用于元素本身)和第二个 div ( .block ) 没有继承任何东西。

换句话说，父元素 block 将其视为子元素 inline或 inline-block级别元素与它对待 text 相同

.inline,
.block {
  line-height: 100px;
  font-size: 12px;
  letter-spacing: 20px;
  white-space: nowrap;
  background: #ddd;
  margin: 10px 0;
}

.block progress {
  display: block;
}

<div class="inline">
  <progress value="30" max="100"></progress>
  <progress value="30" max="100"></progress>
  <progress value="30" max="100"></progress>
  <progress value="30" max="100"></progress>
  <progress value="30" max="100"></progress>
</div>

<div class="block">
  <progress value="30" max="100"></progress>
  <progress value="30" max="100"></progress>
  <progress value="30" max="100"></progress>
  <progress value="30" max="100"></progress>
  <progress value="30" max="100"></progress>
</div>

---

现在有两种更好的方法来解决这个问题。

第一组font-size: 0;到 inline 的父 block 元素这将删除元素 line-height , white-space然后重置 font-size子内联元素与 font-size: initial;和 font-size: normal;用于 IE。

div {
  border: 1px solid blue;
  font-size: 0;
}

div progress {
  font-size: initial;
}

Bigger progress, div expands as expected
<div>
  <progress max="100" value="33" style="height:30px"></progress>
</div>
<br/> Normal progress
<div>
  <progress max="100" value="33"></progress>
</div>
<br/> Smaller progress, div doesn't shrink. Why?
<div>
  <progress max="100" value="33" style="height:7px"></progress>
</div>

---

第二种方式是转换inline元素到 block元素。

div {
  border: 1px solid blue;
}

div progress {
  display:block;
}

<div>
  <progress max="100" value="33" style="height:30px"></progress>
</div>
<br/> Normal progress
<div>
  <progress max="100" value="33"></progress>
</div>
<br/> Smaller progress, div doesn't shrink. Why?
<div>
  <progress max="100" value="33" style="height:7px"></progress>
</div>

来源:

1. Inline-boxes
2. Css-display-inline-vs-inline-block