添加@media规则后页面右侧出现额外空白的问题求助

这个右侧空白的问题根源很明确：当屏幕宽度≤1000px时，.subcontent切换为display:block布局，而内部的.subcontent div同时设置了width:100%和margin:15px。在标准盒模型（content-box）下，width:100%仅指元素内容的宽度，加上左右各15px的margin后，元素总宽度会超过父容器的宽度，从而触发横向滚动条，表现为右侧的空白区域。

下面是两种可行的修复方案：

方案一：调整margin与盒模型（推荐） #

通过给父容器添加内边距替代子元素的左右margin，同时让子元素的宽度包含border，避免溢出：

@media screen and (max-width: 1000px) {
  .subcontent {
    display: block;
    padding: 0 15px; /* 给父容器添加左右内边距，保留原有的间距效果 */
  }
  .subcontent div {
    height: 300px;
    margin: 15px 0; /* 仅保留上下margin，去掉左右margin避免溢出 */
    width: 100%;
    box-sizing: border-box; /* 让width包含border和padding，防止边框撑宽元素 */
  }
}

方案二：使用calc计算精确宽度 #

如果你想保留子元素的左右margin，可以用calc直接计算元素的最大可用宽度，同时还原原布局的居中效果：

@media screen and (max-width: 1000px) {
  .subcontent {
    display: block;
  }
  .subcontent div {
    height: 300px;
    margin: 15px auto; /* 上下保留margin，左右自动居中 */
    width: calc(100% - 30px); /* 100%宽度减去左右margin的总和（15px*2） */
    box-sizing: border-box;
  }
}

另外，建议给全局元素统一设置盒模型，从根源避免类似的溢出问题：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

这样修改后，堆叠布局下的元素就不会超出容器宽度，右侧的空白也会完全消失。

内容的提问来源于stack exchange，提问作者Alexander