Angelos Chalaris Angelos Chalaris - 7 days ago 3
CSS Question

Progress element does not respect right margin

I was trying to stylize the

<progress>
HTML element, using a few tricks I picked up online, but I came accross a problem. My CSS should, in theory, set the
margin-right
and
margin-left
properties to
10px
based on
margin: 2px 10px;
. However, that is not the case. The
<progress>
element, which I am trying to style, respects the
margin-left
, but does not respect the
margin-right
. Any suggestions?

Code





progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 14px;
border: 0;
border-radius: 1px;
margin: 2px 10px;
box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
background: #eeeeee;
color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
background: #01579b;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
border-radius: 1px;
}

<progress value="450" max="1000"></progress>





You can also check out the relative Codepen I prepared.

Notes




  1. Changing the
    margin
    shorthand to individual properties did not make any difference.

  2. Some parts of the CSS stylesheet might be a little bit irrelevant (possibly stuff like the browser-specific styling) or maybe not. I do not exactly know what is causing this problem.

  3. Tested this on Firefox 50 and Chrome 54, same problem in both. I can reproduce the issue both locally and using Codepen and the provided snippet.


Answer

You're wrong: it is respecting margin-right. If you use your browser's console/developer tools to inspect the progress bar, you'll see that it does indeed have a margin-right of 10px.

The problem is with width: 100%. A width set to a percentage means "a of containing block's width". You're then adding to that width the margin. So the box that contains your progress bar will be 20px bigger than the containing element would have been, so it will overflow.

Abandon width: 100%: it's rarely necessary. What you want here is width: auto, which for all block elements means "take up as much space as you can within the containing element" and which automatically adjusts for margin.

progress {
  display: block;
  width: auto;
  vertical-align: baseline;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 14px;
  border: 0;
  border-radius: 1px;
  margin: 2px 0px;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
  background: #eeeeee;
  color: #01579b;
}
/* Foreground - webkit browsers */
progress::-webkit-progress-value {
  background: #01579b;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
}
/* Background - webkit browsers */
progress::-webkit-progress-bar {
  background: #eeeeee;
}
/* Foreground - Firefox */
progress::-moz-progress-bar {
  background: #01579b;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
}
/* Max value - webkit browsers */
progress[value="1000"]::-webkit-progress-value {
  border-radius: 1px;
}
/* Max value - Firefox */
progress[value="1000"]::-moz-progress-bar {
  border-radius: 1px;
}
<div style="position: relative; margin: 0px 50px;">
  <progress value="450" max="1000"></progress>
</div>

Comments