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

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

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

你可以在这里使用vh vh：是视口高度，它仅在高度更改时起作用，而不是在宽度更改时起作用

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

阅读更多关于单位的信息

边距和填充百分比基于CSS中的宽度。。。这就是为什么这种行为。。。请参见另一个有趣的边距问题：您可以使用W3CCSS规范中的视口单位来代替百分比：百分比是根据生成的框的包含块的宽度计算的。请注意，对于页边距顶部和页边距底部也是如此。

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