html - 尽管我使用了 "margin: 0 auto"，但右侧部分多了 10px

Question

my page 上的部分 , 应该在页面的中间。 部分的代码:

section{
margin: 0 auto;
margin-top: 100px;
margin-bottom: 50px;
width: 1000px;

但是该部分在右侧多了 10px。如果您更改页面的大小，您可以更好地查看它:

我希望你能看到我的问题并能帮助我。如果你想要我在这里写整个 css 文件，请告诉我。

Answer 1

您的文章标签溢出了容器。由于边框，它的宽度最终为 300px + 4px + 4px。如果将 box-sizing 设置为 border-box，宽度将正确考虑边框:

article {
  width: 1000px;
  border: 4px solid rgb(25, 25, 25);
  background-color: rgb(75, 75, 75);
  float: left;
  -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.75);
  box-sizing:border-box;
}

很多框架，例如 Twitter Bootstrap，都可以执行 *{box-sizing:border-box;} 因为它更直观。

编辑:

请注意，虽然此解决方案是一种常见的模式，但在现有页面中更改 box-sizing 可能会创建其他要弹出的内容，特别是因为您一直在使用 px 宽度而不是基于百分比的宽度。您可能只想对 部分 执行 width:308px 以防止出现其他问题。

我会推荐 border-box 更健壮，但这取决于你。