为什么进度元素即使高度缩小也占据相同的垂直空间？答案

【问题标题】：Why does the progress element occupy the same vertical space even if shrinked in height?为什么进度元素即使高度缩小也占据相同的垂直空间？
【发布时间】：2017-07-31 10:03:19
【问题描述】：

如果您降低 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>

请注意上面的sn-p中较小的进度上方的空间。是什么导致它存在？可以去掉吗？

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

【问题讨论】：

可以使用vertical-align: top;或浮动：左；
@AlexandruSeverin 在下面查看我的答案，希望它可以帮助您理解这种行为的原因。
@AbhishekPandey 谢谢，确实如此。不过，我还不能提供赏金，必须等待 1 天。
暂时不要奖励赏金，放7天也许你会得到更多更好的答案。

标签： html css progress-bar

【解决方案1】：

这是因为progress 是inline 元素，它从parent block 继承line-height 以在progress 的上方和下方创建空间，

这样的anonymous inline boxes从它们的继承属性阻止父框。非继承属性有其初始值。

了解Inline、Inline-block和Block级元素的区别的简短描述。

内联：内联元素前后没有换行符，并且容忍它旁边的 HTML 元素。

Inline-block：一个 inline-block 元素被放置为一个 inline 元素（在与相邻内容相同的行），但它表现为块元素。

块：块元素有一些其上方和下方的空格，并且不允许任何 HTML 元素在它的旁边。

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

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

换句话说，父 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 元素的父块元素，这将删除line-height、white-space，然后使用font-size: initial; 和font-size: normal; 为IE 重置子内联元素的font-size。

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>

来源：

【讨论】：

【解决方案2】：

如果你想让进度条填满整个 div，你可以使用它。但是您必须将display:block 样式添加到进度条

div{
  border: 1px solid blue;
}

div progress{
  display: block;
}

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 shrinks
<div>
  <progress max="100" value="33" style="height:7px"></progress>
</div>

【讨论】：

display:block 似乎是正确的解决方案。但是在这种情况下-webkit-apperance 的意义何在？即使没有它，它似乎也能工作。

【解决方案3】：

请检查一下。

div{
  border: 1px solid blue; float:left; width:100%;
}
progress{
  float:left
}

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; vertical-align: top;"></progress>
</div>

【讨论】：

我没有给你，但可能是因为当时你的解决方案不起作用。进度显示向上或向下，但仍占用相同的空间。我知道你已经成功了，所以我会给你一个 +1。

【解决方案4】：

div 的行为与内容不符，所以我尝试了这个。我不知道这是否对你有帮助。

<style>

div{
border: 1px solid blue;
}
progress {
vertical-align: top;
}
#div3{
height: 10px;
}

</style>

<body>
<div>
<progress max="100" value="33" style="height:30px"></progress>  
</div>
<br>

<div>
<progress max="100" value="33"></progress>
</div>
<br/>


<div id="div3">
<progress max="100" value="33" style="height:10px"></progress>
</div>
<br>

</body>

【讨论】：

谁能解释一下 div 元素这种奇怪行为背后的原因？