CSS中屏幕宽度不足时如何始终保留元素边距？

这个问题我之前调试布局时也碰到过，核心原因是浏览器对溢出容器的元素margin的处理逻辑：当元素宽度加上左右margin超过视口（或父容器）宽度时，浏览器只会确保元素左侧的margin处于可视范围内，右侧的margin会被挤出视口，即使滚动到最右端也看不到。

看你的代码，内部div固定宽度500px+左右各30px margin，总宽度是560px。当屏幕宽度小于560px时，元素就会溢出视口，此时右侧的30px margin就会被“吃掉”。

下面给你两种实用的解决方案：

方案一：用父容器padding替代子元素margin（推荐） #

把原来子元素的margin转移到父容器的padding上，同时给父容器加上overflow: auto来处理溢出滚动。这样不管屏幕多窄，父容器的padding都会始终保留，滚动时右侧的空间也不会消失。

修改后的代码如下：

<div class="A">
  <div>A</div>
</div>

.A {
  padding: 30px; /* 替代子元素的margin */
  overflow: auto; /* 处理溢出滚动 */
}
.A div {
  width: 500px;
  height: 100px;
  background-color: cyan;
  word-break: break-all;
}

方案二：给父容器设置最小宽度适配子元素总宽度 #

如果一定要保留子元素的margin，可以给父容器设置min-width为子元素的总宽度（500px + 30px*2 = 560px），这样父容器不会小于这个宽度，当屏幕窄于560px时，父容器会触发滚动，子元素的左右margin都能正常显示：

.A {
  min-width: 560px; /* 子元素宽度+左右margin的总和 */
  overflow: auto;
}
.A div {
  margin: 30px;
  width: 500px;
  height: 100px;
  background-color: cyan;
  word-break: break-all;
}

方案一更灵活，因为它不需要固定父容器的最小宽度，能更好适配各种屏幕尺寸；方案二则适合需要严格保留子元素margin样式的场景。

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