| 教學內容：
1、區塊間距樣式 padding-left：訂定區塊的左方間距
我們使用Html語法中的<P>段落標籤，來寫區塊樣式的設定，預設的間距都是零(0)，樣式值可使用度量單位來自訂。
語法：padding-left:樣式值
範例：
| <p style="background-color:#99FF66;padding-left:1cm">內容</p>
| 樣式值 |
效 果 |
| 預設 |
歡迎您光臨。幾分浪漫總讓我們多出一絲絲的希望，踏出現實，我們會找到許多不同的夢想，縱然是片刻的繆思，或幻想，但卻是我們的唯一希望，因為現實中.....少ㄌ，上帝不能將幸福分攤，但至少祂給我們思想；每個人的希望，將成為無盡的力量。那天看看太陽、玩賞月亮，風還是大海，依舊等著你來，我們要的是期盼，是無限狂妄，縱使向狂風怒吼，依然在陽光下成長，我們就是這樣。文／若風小竹小天 |
| 左方間距
1cm |
歡迎您光臨。幾分浪漫總讓我們多出一絲絲的希望，踏出現實，我們會找到許多不同的夢想，縱然是片刻的繆思，或幻想，但卻是我們的唯一希望，因為現實中.....少ㄌ，上帝不能將幸福分攤，但至少祂給我們思想；每個人的希望，將成為無盡的力量。那天看看太陽、玩賞月亮，風還是大海，依舊等著你來，我們要的是期盼，是無限狂妄，縱使向狂風怒吼，依然在陽光下成長，我們就是這樣。文／若風小竹小天 |
|
|
2、區塊間距樣式 padding-right：訂定區塊的右方間距
語法：padding-right:樣式值
範例：
| <p style="background-color:#99FF66;padding-right:1cm">內容</p>
| 樣式值 |
效 果 |
| 預設 |
歡迎您光臨。幾分浪漫總讓我們多出一絲絲的希望，踏出現實，我們會找到許多不同的夢想，縱然是片刻的繆思，或幻想，但卻是我們的唯一希望，因為現實中.....少ㄌ，上帝不能將幸福分攤，但至少祂給我們思想；每個人的希望，將成為無盡的力量。那天看看太陽、玩賞月亮，風還是大海，依舊等著你來，我們要的是期盼，是無限狂妄，縱使向狂風怒吼，依然在陽光下成長，我們就是這樣。文／若風小竹小天 |
| 右方間距
1cm |
歡迎您光臨。幾分浪漫總讓我們多出一絲絲的希望，踏出現實，我們會找到許多不同的夢想，縱然是片刻的繆思，或幻想，但卻是我們的唯一希望，因為現實中.....少ㄌ，上帝不能將幸福分攤，但至少祂給我們思想；每個人的希望，將成為無盡的力量。那天看看太陽、玩賞月亮，風還是大海，依舊等著你來，我們要的是期盼，是無限狂妄，縱使向狂風怒吼，依然在陽光下成長，我們就是這樣。文／若風小竹小天 |
|
|
3、區塊間距樣式減述表示法：依上、右、下、左樣式值設定
語法：
padding:上距樣式值 右距樣式值 下距樣式值 左距樣式值;
(用一空白字元區隔樣式值)
範例：
| 效 果 |
|
語法：
<p style="background-color:#99FF66;padding:1cm
2cm 3cm 4cm">內容</p> |
|
歡迎您光臨。幾分浪漫總讓我們多出一絲絲的希望，踏出現實，我們會找到許多不同的夢想，縱然是片刻的繆思，或幻想，但卻是我們的唯一希望，因為現實中.....少ㄌ，上帝不能將幸福分攤，但至少祂給我們思想；每個人的希望，將成為無盡的力量。那天看看太陽、玩賞月亮，風還是大海，依舊等著你來，我們要的是期盼，是無限狂妄，縱使向狂風怒吼，依然在陽光下成長，我們就是這樣。文／若風小竹小天 |
|
|
|
