CSS padding 內邊距

admin發表於2018-08-03
CSSpadding

內邊距是元素邊框內側和內容之間的區域，使用 padding 屬性定義。

CSS 盒模型圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201808/21/104143kqsn5fqdbq6dtrof.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

content 與 border 之間的區域就是 padding 定義的內邊距區域。

padding 屬性引數規則如下：

（1）.如果提供全部四個引數值，將按上、右、下、左的順序作用於四邊。

（2）.如果只提供一個，將用於全部的四邊。

（3）.如果提供兩個，第一個用於上、下，第二個用於左、右。

（4）.如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。

特別說明：內聯元素可以設定左、右內邊距；若要設定上、下內邊距，須先轉換為塊級或內聯塊級。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  margin:50px;
  width: 120px;
  height: 20px;
  border: 2px dotted #ccc;
  padding: 30px 20px 30px 40px;
  font-size: 12px;
  color:green;
}
</style>
</head>
<body>
  <div>螞蟻部落</div>
</body>
</html>

以上程式碼分別設定上、右、下、左的 padding 值為：30px、 20px 、30px 、40px。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/26/185952w7111e7s9o22zmm0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面圖片分別標註了各個方位的 padding 內邊距。

特別說明：預設，優先滿足左內邊距和上內邊距，具體參閱右內邊距失效一章節。

百分比數值定義 padding 屬性值：

padding 屬性值不但可以是 <length> 方式，也可以使用百分比。

程式碼例項如下：

[CSS] 純文字檢視 複製程式碼
div {padding: 20%}

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.box {
  width:180px;
  height:50px;
  padding:10px;
  border:2px dotted #ccc;
}
.ant {
  width: 100px;
  height: 30px;
  line-height: 30px;
  padding-left: 20%;
  border: 1px dotted #ccc;
  font-size: 12px;
  color:green;
}
</style>
</head>
<body>
<div class="box">
  <div class="ant">螞蟻部落</div>
</div>
</body>
</html>

上述程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/26/190304bl3za8egad08lhti.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

百分數是以塊級父元素的寬度尺寸為參考，只參考寬度，所以 ant 左內邊距為 36px 。

單獨設定某一方位 padding 值：

上面的程式碼都是一次性設定四個方位的內邊距。

也可以單獨設定某一方位的內邊距，使用如下屬性即可:

（1）.padding-top：設定上內邊距。

（2）.padding-right：設定右內邊距。

（3）.padding-bottom：設定下內邊距。

（4）.padding-left：設定左內邊距。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  width: 100px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 30px;
  border: 2px dotted #ccc;
  font-size: 12px;
  color:green;
}
</style>
</head>
<body>
  <div>螞蟻部落</div>
</body>
</html>

上述程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/202003/26/145959tdwrzwsww63odlf5.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

padding 是複合屬性，可以單獨設定某一方位的內邊距。

特別說明：在無必要的情況下，不推薦使用上述方式設定內邊距。

相關文章