天天看點

CSS基礎(part11)--盒子模型之内邊距

學習筆記,僅供參考,有錯必糾

參考自:某不知名網課

文章目錄

  • ​​盒子模型​​
  • ​​内邊距(padding)​​
  • ​​屬性設定​​
  • ​​内盒尺寸計算​​
  • ​​padding什麼時候不影響盒子大小​​

盒子模型

内邊距(padding)

padding屬性用于設定内邊距, 是指邊框與内容之間的距離。

屬性設定

屬性 作用
padding-left 左内邊距
padding-right 右内邊距
padding-top 上内邊距
padding-bottom 下内邊距

注意,當我們給盒子指定padding值之後,内容和邊框之間有了距離,并且盒子會變大。

如果我們簡寫成​

​padding:數值1 數值2 ...​

​的形式,那麼根據數值個數的不同,該css語句表達的意思也不同:

值的個數 表達意思
1個值 padding:上下左右内邊距;
2個值 padding: 上下内邊距 左右内邊距 ;
3個值 padding:上内邊距 左右内邊距 下内邊距;
4個值 padding: 上内邊距 右内邊距 下内邊距 左内邊距 ;

内盒尺寸計算

因為設定padding會撐大盒子,是以我們需要計算盒子的實際尺寸。

  • 寬度

​Element Height = content height + padding + border​

  • 高度

​Element Width = content width + padding + border​

  • 舉個例子

如果我們設定content高度為100px, content寬度為100px,padding為20px,border為5px,那麼盒子會變成寬度為150px,高度為150px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS盒子</title>
  <style>

  div {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 5px dashed red;
    background-color: green;
  }

  </style>
</head>
<body>
  <div></div>
</body>
</html>      

頁面:

CSS基礎(part11)--盒子模型之内邊距

審查元素:

CSS基礎(part11)--盒子模型之内邊距
CSS基礎(part11)--盒子模型之内邊距

padding什麼時候不影響盒子大小

如果沒有給一個盒子指定寬度(width), 那麼如果給這個盒子指定padding, 則不會撐開盒子,比如我們不設定p标簽的width屬性:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS盒子</title>
  <style>

  div {
    width: 100px;
    height: 100px;
    background-color: green;
  }
  p {
    height: 30px;
    padding-left: 30px;
    background-color: yellow;
  }

  </style>
</head>
<body>
  <div>
    <p>歡迎</p>
  </div>
</body>
</html>      

頁面:

CSS基礎(part11)--盒子模型之内邊距

審查元素:

CSS基礎(part11)--盒子模型之内邊距