容器设为200vw宽度后margin-right不生效问题咨询

为什么右侧margin看起来没生效？ #

你设置的容器宽度是200vw，左右margin各为15%——这里的百分比是基于父元素（通常是body，宽度为100vw）计算的，所以左右margin实际各占15vw。容器的总占用宽度为 200vw + 15vw*2 = 230vw，远超过视口宽度。浏览器会生成横向滚动条，但默认只显示视口范围内的内容，右侧的margin需要滚动到最右端才能看到，因此看起来像是没生效。

解决方案 #

根据你的实际需求，可选择以下处理方式：

情况1：保留容器200vw宽度，确认margin生效 #

这种情况下，只需横向滚动到页面最右端就能看到右侧margin。如果想更直观地观察，可以给body添加背景色，区分容器和margin区域：

body {
  background-color: #eee;
  margin: 0;
}
.container {
  width: 200vw;
  display: flex;
  margin: 0 15%;
  background-color: #fff;
}

情况2：让容器整体（含margin）不超出视口 #

如果希望容器加上margin后总宽度不超过视口，用calc()计算容器宽度：

.container {
  width: calc(100% - 30%); /* 100%视口宽度减去左右各15%的margin */
  display: flex;
  margin: 0 15%;
}

或者直接去掉固定宽度，让flex容器自动适配：

.container {
  display: flex;
  margin: 0 15%;
  width: auto; /* 默认值，可省略 */
}

情况3：容器内部需要左右间距（而非容器自身margin） #

如果是想让子元素和容器边缘有间距，应该用容器的padding替代margin，同时开启box-sizing: border-box避免padding增加容器总宽度：

.container {
  width: 200vw;
  display: flex;
  padding: 0 15%;
  box-sizing: border-box;
}

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