CSS padding內邊距

admin發表於2018-08-03
原文網址 : http://www.softwhy.com/article-8646-1.html
CSSpadding

內邊距是物件邊框內側和內容之間的區域，可以使用padding屬性來定義。

圖示如下:

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="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:100px;
  height:50px;
  border:1px solid #000;
  padding:10px 20px 30px 10px;
}
</style>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

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

百分比數值定義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:400px;
  height:200px;
  border:1px solid #000;
}
.ant{
  width:100px;
  padding-left:20%;
  border:1px solid #f00;
}
</style>
</head>
<body>
<div class="box">
  <div class="ant">螞蟻部落</div>
</div>
</body>
</html>

百分數是以父元素的尺寸為參考的。

單獨設定某一方位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="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.ant{
  width:100px;
  padding-top:10px;
  padding-right:20px;
  padding-bottom:30px;
  padding-left:30px;
  border:1px solid #000;
}
</style>
</head>
<body>
<div class="ant">螞蟻部落</div>
</body>
</html>

相關文章