Why does the progress element occupy the same vertical space even if shrinked in height?

If you reduce the height of a progress element, it becomes visually smaller but it still occupies the same space as if it had original height.

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>

Notice the space above the smaller progress from the above snippet. What causes it to exist? Can it be removed?

I tried shrinking margin, font-size, line-height and such with no success, and I haven't found any info about this behavior.