早初，當我們設計某些板塊內容時，我們總會給它一個height值，讓它剛好適合內容大小，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
.con{
height: 100px;
width: 400px;
background-color: #9fcdff;
color: black;
}
</style>
<body>
<div class="con">
<p>好好學習天天向上</p>
<p>好好學習天天向上</p>
<p>好好學習天天向上</p>
</div>
</body>
</html>
然而在設計的過程中，我們難免會遇到代碼內容臨時修改的現象，比如我們再在div裏增加多了幾個<p>標籤內容：
<div class="con">
<p>好好學習天天向上</p>
<p>好好學習天天向上</p>
<p>好好學習天天向上</p>
<p>好好學習天天向上</p>
<p>好好學習天天向上</p>
</div>
這時的運行起來就會超出div的height值，我們還要重新修改height長度的話，就會過於麻煩。
有沒有什麼辦法可以讓長度隨着內容的多少進行自適應呢?
.con{
/* height: 100px;*/
padding-bottom: 10px;
width: 400px;
background-color: #9fcdff;
color: black;
}
很簡單，這裏我們只需要把height屬性去掉，給它一個padding-bottom的值，就可以了。
這樣，無論我們的內容增加了還是減少了，div的長度都會自適應的，是不是簡單輕鬆多了。
個人實戰參考網站：https://www.aiadmin.com/user/reg_5.html
