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

Question

＆＃13;

＆＃13;

.outer {
  padding: 50px;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

就我而言，内联块显示并不方便，因为我想把我的内部div放在中心。

Answer 1

尝试在样式表的顶部添加：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

你也应该使用

margin: 0 auto

让你的内部div水平居中

Answer 2

 Change the width 
<div class="outer">
      <div class="inner">
        <div class="content">qwerty</div>
      </div>
    </div>

.outer {
  padding: 50px;
 border:1px solid red;

}

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

Fiddler https://jsfiddle.net/bpyfckn6/

Answer 3

你的.inner有一个width:500px所以它不会小于那个。要解决您的问题：

.inner {
width: 100%;
max-width:500px;
}

小提琴：https://jsfiddle.net/4sk4bqxh/

Answer 4

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

以下是使用max-width方法的解决方案

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>