当屏幕变小时，为什么div之间的距离会变大，我该如何防止呢？

Question

似乎宽度越窄，所有东西之间的距离就越远。 如何防止这种情况发生？

 .section1 { background: url("img/Rectangle 1.jpg") no-repeat center; background-size: 100% auto; padding: 300px 0; } .section2 { background: url("img/Diagnostic.jpg") no-repeat center; background-size: 100% auto; padding: 500px 0; } 

 <section class="section1"> <div class="container"> <div class="row"> <div class="col-lg-12 info" align="center"> Make Future Visible <span>&trade;</span> </div> </div> <div class="row"> <div class="col-lg-12 info2" align="center"> Real-time predictive analytics for refining equipment eliminate accidents<br> and fires, increases refinery uptime, decreases downtime and drastically<br> reduces maintenance costs. </div> </div> </div> </section> <section class="section2"> </section> 

Answer 1

那是因为您的padding设置。 设置padding: 300px 0; 它翻译为：

padding-top: 300px;
padding-right: 0;
padding-bottom: 300px;
padding-left: 0;

调整.section1和.section2之间的间距时，其大小将为800px（300px + 500px）， padding不会自动折叠。 尝试改用margin 。

请参阅何时在CSS中使用边距与填充

或者您可以设置min-height