當屏幕變小時，為什么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