html - 进度元素不尊重右边距

Question

我试图将 <progress> 风格化HTML 元素，使用了一些我在网上学到的技巧，但我遇到了一个问题。理论上，我的 CSS 应该设置 margin-right和 margin-left属性为 10px基于 margin: 2px 10px; .然而，事实并非如此。 <progress>我尝试设置样式的元素尊重 margin-left , 但不尊重 margin-right .有什么建议么？

代码

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>

您还可以查看 the relative Codepen我准备好了。

注意事项

1. 更改 margin个别属性的缩写没有任何区别。
2. CSS 样式表的某些部分可能有点不相关(可能是浏览器特定样式之类的东西)，也可能不相关。我不完全知道是什么导致了这个问题。
3. 在 Firefox 50 和 Chrome 54 上测试了这个，两者都有同样的问题。我可以在本地重现该问题，也可以使用 Codepen 和提供的代码段重现。

Answer 1

你错了:它是尊重margin-right。如果您使用浏览器的控制台/开发人员工具检查进度条，您会发现它确实有 10px 的 margin-right。

问题出在 width: 100% 上。设置为百分比的 width 表示 "a of containing block's width" .然后，您将 添加 到该宽度的边距。因此，包含进度条的框将比包含的元素大 20px，因此它会溢出。

放弃 width: 100%:很少有必要。你在这里想要的是 width: auto，对于所有 block 元素意味着“在包含元素中占用尽可能多的空间”并且它会自动调整 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>