让按钮填充容器元素的整个宽度？

我正在从使用转换div作为实际按钮的按钮，现在我需要使按钮填充容器的整个宽度。

Code:

.container {
  background-color: #ddd;
  padding: 10px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.button {
  display: block;
  background-color: #bbb;
  margin: 10px;
  padding: 10px
}

<div class="container">

  <div class="button">
    Fills the full width
  </div>

  <button class="button">
    Does not fill the full width
  </button>

</div>

Adding display:block to .button不起作用（尽管我确信这必须是答案的一部分？），而且也不起作用left: 0; right: 0. width: 100%有点有效，但它忽略了容器的填充属性并使按钮太靠近容器的右侧。

这是 JSFiddle：http://jsfiddle.net/mn40mz2n/ http://jsfiddle.net/mn40mz2n/

将“box-sizing: border-box”属性添加到所有元素。宽度和高度属性包括填充和边框，但不包括边距。这将确保您跨元素的测量正确并考虑填充。 display: block 和 width: 100% 是全宽的正确方法，但是当按钮将其推到包含元素之外时，您需要删除按钮上的左/右边距。

* {
    box-sizing: border-box
} 

.container {
    background-color: #ddd;
    padding: 10px;
    margin: 0 auto;
    max-width: 500px;
}

.button {
    background-color: #bbb;
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 100%;
}

有关 box-sizing 属性的更多信息，请阅读 MDNdocs https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing.