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之上和之下的空间，

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

简短说明，了解内联，内联块和块级别元素之间的区别。

内联：内联元素在它之前或之后没有换行符   容忍它旁边的HTML元素。

内联块：内联块元素被放置为内联元素（在   与相邻内容相同的行），但它表现为块元素。

阻止：块元素有一些   它上面和下面的空格，不容忍任何HTML元素   在它的旁边。

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

在第一个div（.inline）中，进度条继承了父块的所有属性，除了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元素的父块元素，这将删除line-height，white-space，然后重置font-size子内联元素font-size: initial; 1}}和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>

来源：

Answer 2

如果您希望进度条填充整个div，可以使用此选项。但是您必须将display:block样式添加到进度条

＆＃13;

div{
  border: 1px solid blue;
}

div progress{
  display: block;
}

＆＃13;

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>

＆＃13;

Answer 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>

Answer 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>

为什么即使高度收缩，进度元素也会占据相同的垂直空间？

4 个答案: