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