为什么水平调整屏幕大小时上/下边距设置为 % 变化？ [复制]答案

【问题标题】：Why does top/bottom margin set to % change when resizing the screen horizontally? [duplicate]为什么水平调整屏幕大小时上/下边距设置为 % 变化？ [复制]
【发布时间】：2019-10-10 16:20:10
【问题描述】：

为什么在水平调整屏幕大小时上/下边距设置为 % 变化？

这是一个带有框的布局示例，我已将所有边距设置为 1.45%。我明白为什么左右边距会改变，但是当我水平调整屏幕大小时，为什么上下边距会改变？ 有没有办法实现这一点，以便它们只在垂直调整屏幕大小时改变？

https://jsfiddle.net/c60ymrfu/2/

.item {
  width:30%;
  margin-left:1.45%;
  margin-right:1.45%;
  margin-top: 1.45%;
  margin-bottom: 1.45%;
}

【问题讨论】：

margin 和 padding 的百分比是基于 CSS 中的 width ......这就是为什么这种行为......看看另一个有趣的边距问题在这里：stackoverflow.com/questions/46105138
你可以使用 viewport units 而不是 percentages：jsfiddle.net/xqn2vybg
来自 W3C CSS 规范 (w3.org/TR/CSS2/box.html)：百分比是根据生成框的包含块的宽度计算的。请注意，margin-top 和 margin-bottom 也是如此。

标签： html css sass responsive-design

【解决方案1】：

你可以在这里使用 vh vh: 是视口高度，它只会在高度变化而不是宽度变化时做出反应。

.item {
  width:30%;
  margin-left:1.45%;
  margin-right:1.45%;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

在此处阅读有关单位的更多信息 https://developer.mozilla.org/en-US/docs/Web/CSS/length

【讨论】：