內間距，有上右下左四個設定值：
padding-top
padding-left
padding-bottom
padding-right

間距：是指內容到邊界的距離，上右下左四邊的距離

例如：<div>的 padding和 margin 的內距和外距都是0。是專門用來畫面排版設計的

例如：<p> 和 <h1>的 padding和 margin 是有預設值的距離的。所以是用來做內容處理的，段落和標題字

例如：<span>是另一個常用的區塊，內距和外距都是0。是用來做內容局部設定的

範例1：

<style type="text/css">
div{
    border: 1px solid #333;     /* 加個 1px的框線 */
}
</style>
<div></div>
<div></div>
<div></div>
<div>div</div>
<div>div</div>
<div>div</div>

效果展示：

前三個是無內容，所以沒有高度的<div> ，只能看到1px的黑線

後三個是有內容的<div>

所以可以看到<div>標籤是沒有內距和外距的

 

範例2：

<style type="text/css">
p,h2{
    border: 1px solid #333;
}
</style>
<p>p</p>
<p>p</p>
<p>p</p>
<h2>h2</h2>
<h2>h2</h2>
<h2>h2</h2>

效果展示：

可以看到：段落<p>和標題字 <h1> ~ <h6> 標籤，都是有設定好的內距和外距

當然，如果你把段落和標題字的內距和外距都設定為0，那就和<div>是一樣的

p

p

p

h2

h2

h2

內間距，有上右下左四個設定值：
padding-top
padding-left
padding-bottom
padding-right

設定方式1：上右下左四個設定值：
padding-top: 20px;
padding-left 20px;
padding-bottom 20px;
padding-right 20px;

設定方式2：只寫 padding 和二個設定值，分為 上下 與 左右 的設定值
例如：設定上下內距為 20px、左右內距為 50px;
padding: 20px 50px;

設定方式3：只寫 padding 和一個設定值，那麼就是設定上下左右都是一個值
例如：設定上右下左內距都是 20px
padding: 20px;

範例1：

設定：上內距 50px、左內距 50px

<style type="text/css">
div{
    border: 1px solid #333;
    padding-top: 50px;
    padding-left: 50px;
}
</style>

<div>上內距 50px、左內距 50px</div>

效果展示：

 

範例2：

設定：上下 100px、左右 0px

<style type="text/css">
div{
    border: 1px solid #333;
    padding: 100px 0;
}
</style>

<div>上下內距100px、左右0</div>

效果展示：

 

範例3：

設定：上右下左都是 50px

<style type="text/css">
div{
    border: 1px solid #333;
    padding: 100px;
}
</style>

<div>上下內距100px、左右0</div>

效果展示：

 

範例4：

設定：上右下左設定為：上 150px、右 100px、下 50px、左 50px

<style type="text/css">
div{
    border: 1px solid #333;
    padding: 150px 100px  50px 50px ;
}
</style>

<div>上 150px、右 100px、下 50px、左 50px</div>

效果展示：

 

範例1：

設定：下外距 50px、左外距 50px

<style type="text/css">
body{
    margin: 0;  /* 因為body標籤也有預設的 margin 值，所以要先設定為0 */
}
div{
    border: 1px solid #333;
    margin-bottom: 50px;
    margin-left: 50px;
}
</style>

<div>下外距 50px、左外距 50px</div>
<div>下外距 50px、左外距 50px</div>
<div>下外距 50px、左外距 50px</div>

效果展示：

 

範例2：

設定：上 100px、右 200px、下 50px、左 300px

<style type="text/css">
body{
    margin: 0;  /* 因為body標籤也有預設的 margin 值，所以要先設定為0 */
}
div{
    border: 1px solid #333;
    display: inline-block;
}
img{
    border: 1px solid #333;
    margin: 100px 200px 50px 300px;
}
</style>

<div>
    <img src="images/logo.png">
</div>

效果展示：

設定：上 100px、右 200px、下 50px、左 300px