3

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.

Alexandru Severin
  • 6,021
  • 11
  • 48
  • 71

4 Answers4

2

You can use this if you want the progress bar to fill the entire div. But you will have to add the display:block style to the progress bar

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>
Alexandru Severin
  • 6,021
  • 11
  • 48
  • 71
Victor Allegret
  • 2,344
  • 3
  • 18
  • 31
  • `display:block` seems to be the proper solution. But what is the point of `-webkit-apperance` in this scenario? It seems to work even without it. – Alexandru Severin Jul 31 '17 at 10:33
2

This is happening because progress is inline element, which is inheriting line-height from parent block to create space above and below of progress,

Such anonymous inline boxes inherit inheritable properties from their block parent box. Non-inherited properties have their initial value.

Short description to understand the difference 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 following demo you can see the difference between inline and block level element.

In the first div (.inline) the progress bars are inheriting all properties from parent block except background and margin (these two applies on element itself) and in the second div (.block) nothing is being inherited.

In other words parent block element treats it's child inline or inline-block level element same as it treats text in 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 better ways to fix this.

First set font-size: 0; to parent block element of inline element this will remove line-height, white-space and then reset font-size of child inline element with font-size: initial; and font-size: normal; for 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>

The second way is to convert inline element to 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:

  1. Inline-boxes
  2. Css-display-inline-vs-inline-block
Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
0

Please check this.

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>
chander shekhar
  • 425
  • 2
  • 10
  • I didn't give it to you, but probably because at that time your solution didn't work. The progress was displayed up or down, but still occupied the same space. I see you got it to work so I'll give you a +1. – Alexandru Severin Jul 31 '17 at 10:29
0

div was not behaving as per the content so I tried this. I don't know if this helps you or not. 

<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>
Vipul Tyagi
  • 83
  • 1
  • 10