第三篇
HTML教學
第五節
網頁圖片
圖片相關屬性標籤(六)
Hspace
="
pixel
"
Vspace
="
pixel
"
<
Img
Src
="
images/pics.gif
"
Hspace
="
pixel
"
Vspace
="
pixel
"
>
Hspace
原文為
H
orizontal
Space
Vspace
原文為
V
ertical
Space
語 法 說 明
Hspace
="
pixel
"
H
是英文
H
orizontal 的縮寫，合在一起是表示圖片與文字兩者間水平或左右間距的意思。
Vspace
="
pixel
"
V
是英文
V
ertical 的縮寫，合在一起是表示圖片與文字兩者間垂直或上下間距的意思。
以下範例，我將圖片放在一個有色的內表格內，讓您瞭解它與框邊實際的距離，就會容易明白了。
範例
HTML標籤
<
Img
Src
="
images/pics.gif
"
Hspace
="
20
"
Vspace
="
20
"
>
顯示結果
水平距離各 20 pixel
Hspace
="
20
"
水平及垂直距離各 20 pixel
Hspace
="
20
"
Vspace
="
20
"
垂直距離各 20 pixel
Vspace
="
20
"
下面範例，我將圖片及一些文字，放在一個有色的內表格內，並加入
Align
屬性，讓您瞭解它與框邊實際的距離，並體會圖片與文字的關係了。
範例
HTML標籤
<
Img
Src
="
images/pics.gif
"
Align
="
Left
"
Hspace
="
20
"
>
文字敘述 ...
顯示結果
水平距離各 20 pixel
這是老翁圖檔，
Hspace
="
20
" "表示圖片水平(左右)位置，會空出 20 Pixel 的空白像數，使圖片與左右文字不會擠壓在一起，而
Align
="
Left
" 就是使文字置左功能。
Align
="
Left
"
Hspace
="
20
"
下面範例，我沒有設定
Hspace
及
Align
屬性，它就會以
預設值
與邊框緊緊黏在一起並置底處理。
範例
HTML標籤
<
Img
Src
="
images/pics.gif
"
>
文字敘述 ...
顯示結果
這是老翁圖檔，因為沒有設定
Hspace
及
Align
屬性，它就會以
預設值
與邊框緊緊黏在一起並置底處理。
Hspace="pixel" H 是英文 Horizontal 的縮寫，合在一起是表示圖片與文字兩者間水平或左右間距的意思。
