代码之家 › 专栏 › 技术社区 › Alexandru Severin

为什么即使高度缩小,进度元素仍占据相同的垂直空间?

progress-bar css html

Alexandru Severin · 技术社区 · 8 年前

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

注意上面代码段中较小进度上方的空格。是什么导致了它的存在?可以移除吗?

4 回复 | 直到 8 年前

Abhishek Pandey 8 年前

progress 是 inline 元素,该元素正在继承 line-height 从…起 parent block 在的上方和下方创建空间 ,

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

内联 , 内联块 块水平元素。

:内联元素前后没有换行符,并且允许它旁边的HTML元素。

:内联块元素作为内联元素放置(在

块 :块元素有一些在它旁边。

在下面的演示中,您可以看到和 block level元素。

div ( .inline )进度条从父块继承所有特性,除了 background 和 margin 部门 .block )没有任何东西被继承。

换句话说,家长元素处理它的子元素 内联 或 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; 内联 这将删除的元素 线路高度 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>

内联 元素到 块

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>

资料来源:

Alexandru Severin 8 年前

如果希望进度条填充整个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>

chander shekhar 8 年前

请检查这个。

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>

Vipul Tyagi 8 年前

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