Progress element does not respect right margin - html

Question

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
Changing the margin shorthand to individual properties did not make any difference.
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.
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 1

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>

Answer 2

You could solve it with div parent, which uses margin instead of progress bar.
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 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>

Answer 3

You can wrap the progress bar with a div and add padding. See:
.wrapper {
display: block;
background: red;
width: 500px;
padding: 10px;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 14px;
border: 0;
border-radius: 1px;
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;
display: block;
width: 100%;
}
/* 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 class="wrapper">
<progress value="450" max="1000"></progress>
</div>

Answer 4

Apart from all the other ways to solve this, I have also found that using calc() can solve the problem quite easily and without changing but one line from width: 100%; to width: calc(100% - 20px); - some browser-specific prefixing might be required to cover all browsers.
To generalize this solution, replace 20px with the sum of the values of margin-left and margin-right.
progress {
display: block;
vertical-align: baseline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: calc(100% - 20px);
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>