|
テキストや画像の左右マージン
|
|
|
画像とテキストや、画像と画像の、左右に空白を指定する 10進数(整数)で指定
IE 拡張機能で、HTMLでの指定は
非推奨とされ
STYLEで指定を推奨しています。
左右のマージン
|
<img src="
画像URL"
hspace="
">
|
|
|
|
画像と、テキストの左右にマージンを指定したサンプル。
画像の周囲に、マージンが適用されテキストもマージンが適用され表示されている。
季節の草花、冬（一月）の写真
|
|
|
<img src="pic005.jpg" width="100" height="80" alt=
"季節の草花"
hspace="20">
季節の草花、冬（一月）の写真
|
|
|
|
|
画像と、テキストの左右にマージンを無指定のサンプル。
画像とテキストに間隔がなく表示されている。
|
季節の草花、冬（一月）の写真
|
|
|
<img src="pic005.jpg" width="100" height="80" alt=
"季節の草花"
>
季節の草花、冬（一月）の写真
|
|
|
|
|
画像と、画像にマージンを無指定したサンプル。
画像と画像のマージンが適用されず表示されている。
|
|
|
<img src="hasi.gif" alt="
明石海峡大橋の写真です"
width="100" height="60"
>
|
| |
<img src="ok02s.gif" alt="
マーメード号の夜景写真です"
width="100" height="60">
|
|
|
|
|
画像と、画像の左右にマージンを指定したサンプル。
画像と画像にマージンが適用され表示されている。
|
|
|
<img src="hasi.gif" alt="
明石海峡大橋の写真です"
width="100" height="60" hspace="50"
>
|
| |
<img src="ok02s.gif" alt="
マーメード号の夜景写真です"
width="100" height="60">
|
|
|
|
|
IMG
関連タグ 解説
関連
URL
IMG関連TAG
| 属性 |
語源 |
読みかた |
説明 |
|
hspace
|
horizontal space
|
エイチスペース
|
水平であるサイズの意味
JAVA アプレット、画像、オブジェクトの文書中の水平方向の余白スペースを指定。
|
|
vspace
|
vertical space
|
ヴィスペース
|
垂直であるサイズの意味
JAVA アプレット、画像、オブジェクトの文書中の垂直方向の余白スペースを指定。
|
|
|
|
|
HTML TAG
|
|
詳 細
|
|
|---|
|
<img>
|
要素
|
画像を表示する
属性、属性値は
要 素
括弧内に設定する。
|
空要素 終了タグなし
|
|
src=""
|
属性
|
場所の属性 括弧内に画像のファイル名を設定する、セットで省く事は出来ない
|
<img>
|
|
hspace=""
|
属性
|
左右の間隔を空けて表示。ピクセル(整数)で指定。
|
<table> <th>
<tr>
<td> <img>
|
|
vspace=""
|
属性
|
上下の間隔を空けて表示。ピクセル(整数)で指定。
|
<table> <th>
<tr>
<td> <img>
|
|
|
|
|
|
参考 スタイルでの指定
上下・左右のマージン 詳細は、スタイル講座で。
<img src="
画像URL"
style="margin-left:10px; margin-right:10px;"
>
<img src="
画像URL"
style="margin-left:10px; margin-right:10px;"
>
|
パディング 指定例
マージン
マージンはボーダーの外側の余白
margin: 1px 2px 3px 4px; /* 上=1px、右=2px、下=3px、左=4px */
マージン
margin-top: 1px;
margin-bottom:1px;
margin-left:1px;
margin-right:1px;
パディング
ボーダーの内側の余白になります。
padding: top 1px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
|
|
|
|
|
|
|