The reason for this issue is that the progress element is an inline element, inheriting the line-height property from its parent block. This causes space to be created above and below the progress element.
Anonymous inline boxes inherit inheritable properties from their
block parent box. Non-inherited properties have their initial value.
A brief explanation of the differences between Inline, Inline-block, and Block level elements.
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.
In the following demonstration, you can observe the distinction between inline and block level elements.
In the first div (.inline), the progress bars inherit all properties from the parent block except for background and margin (which apply directly to the element itself). In the second div (.block), nothing is inherited.
In simple terms, a parent block element treats its child inline or inline-block level element similarly to how it treats text within it.
.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>
Now, there are two improved ways to resolve this issue.
First, set font-size: 0; on the parent block element of the inline element to eliminate line-height and
white-space</code. Then, reset the <code>font-size
of the child inline element using
font-size: initial; and use
font-size: normal; for IE compatibility.
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>
The second approach is to convert the inline element into a block element.
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>
Sources:
- Inline-boxes
- Css-display-inline-vs-inline-block