html - 为什么在滚动条附近忽略了正确的填充，在我的情况下如何解决这个问题？

Question

.outer {
  padding: 50px;
}

.inner {
  width: 500px;
  height: 1000px;
  border: 1px solid gray;
  margin: auto;
}

<div class="outer">
  <div class="inner">
    <div class="content">qwerty</div>
  </div>
</div>

就我而言，内联 block 显示不方便，因为我想将内部 div 居中。

Answer 1

它分解了右填充，因为外部 div 的左右填充是 50+50=100px 而你的内部 div 宽度是 500px 所以当窗口屏幕小于 600px 外部 div 右填充分解并且内部 div 宽度 500px 需要它的固定宽度。 在这种情况下，您可以使用 media query或 max-width method .您还将宽度设置为 50% 或 100% 无媒体查询 无需设置最大宽度。

这是最大宽度方法的解决方案

body{
  margin:0;
}
.outer {
  padding: 50px;
  border: 1px solid red;
}

.inner {
   max-width: 500px;
  height: 1000px;
  border: 1px solid gray;
  margin:0 auto;
}

<div class="outer">
 <div class="inner"> 
   <div class="content">qwerty</div>
 </div>
</div>