內邊距padding，又常常稱為“補白”，它指的是內容區到邊框之間的那一部分。
從CSS盒子模型中，我們可以看出，內邊距padding分為四個方向的內邊距：padding-top、padding-right、padding-bottom、padding-left。
語法：
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS內邊距padding屬性</title>
<style type="text/css">
#main
{
display:inline-block;/*將塊元素轉換為inline-block元素*/
border:1px solid #CCCCCC;
}
.lvye
{
display:inline-block; /*將塊元素轉換為inline-block元素*/
padding-top:20px;
padding-right:40px;
padding-bottom:60px;
padding-left:80px;
margin:40px;
border:1px solid red;
background-color:#FCE9B8;
}
span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
<div id="main">
<div class="lvye"><span> 學習網</span></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：
我們可以使用padding屬性來設置四個方向的內邊距。在實際編程中，我們往往使用的是padding的這種高效簡潔寫法來編程。
padding寫法有3種，分別如下：
語法：
padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;
例如：
“padding:20px;”表示四個方向的內邊距都是20px；
“padding:20px 40px;”表示padding-top和padding-bottom為20px，padding-right和padding-left為40px。
“padding:20px 40px 60px 80px;”表示padding-top為20px，padding-right為40px，padding-bottom為60px，padding-left為80px。大家按照順時針方向記憶就可以了。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS內邊距padding屬性</title>
<style type="text/css">
#main
{
display:inline-block;/*將塊元素轉換為inline-block元素*/
border:1px solid #CCCCCC;
}
.lvye
{
display:inline-block; /*將塊元素轉換為inline-block元素*/
padding:40px 80px;
margin:40px;
border:1px solid red;
background-color:#FCE9B8;
}
span{border:1px solid blue;background-color:#C5FCDF;}
</style>
</head>
<body>
<div id="main">
<div class="lvye"><span> 學習網</span></div>
</div>
</body>
</html>
在浏覽器預覽效果如下：