Question

当我意识到缩小窗口的次数越多，左右边（大多数是右边）的边距空间就不断消失时，我正在测试本地网站的大小。

我尝试通过指定2rem或50px之类的边距来编辑html和body CSS，但这没有用，甚至尝试了@media函数，但也没有用。他们所做的唯一一件事情就是将我不想做的衬衫穿上衬衫，因为它本来应该居中。这是我到目前为止的内容：

html {
  background-color: rgb(16,17,140);
  color: white;
  text-align: center;
  font-family: cambria;
  height: 100%;
}

body {
  width: 65rem;
  background-color: rgb(35,145,241);
  padding: 2rem 0rem;
  -webkit-border-radius: 3rem;
  margin: 0 auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

有没有一种方法可以在缩小窗口期间固定边距而不影响居中主体的位置？

Answer 1

您已将页边距设置为0 auto-本质上将使元素在页面中居中。问题在于您已在此处将宽度明确设置为65rem（这有点奇怪，这是对REMs的深入了解）

基本上，当您现在使用大尺寸屏幕时，您的宽度上限为65rem，因此您的body元素只会那么大。 margin: 0 auto;将使它居中。随着它变小，您的身体将保持该宽度-边缘似乎消失了。

删除主体的宽度并明确设置边距将为您带来想要的效果。

body {
  background-color: rgb(35,145,241);
  padding: 2rem 0rem;
  -webkit-border-radius: 3rem;
  margin: 0 50px;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

缩小屏幕尺寸时还能保持边距吗？

1 个答案: