サイト内検索

...HTML・XHTMLタグ...

画像

回り込んだテキストと画像の余白

画像のとの間に余白をつけるには
上下の空白を付けるには、img要素にvapace属性を指定します。
左右の空白を付けるには、img要素にhspace属性を指定します。
[使い方]
<img src="../sample.jpg" align="center"vapace="数値"hspace="数値">
[メモ・・・W3Cの検証サイト・・・]
HTML 4.01 Strict ・ XHTML1.0 Strictでは、推奨されていませんので、
Validするには、スタイルシートを使用します。
marginプロパティを指定します。
[サンプル]
.sample{float: left; margin-right: 10px;}
または
.sample{float: left; margin-right: auto;}
属性 属性値 説明
vapace= "" 上下の余白を付ける場合に指定します。
「"5"」のように
整数の「ピクセル数」を指定します。
hspace= "" 左右の余白を付ける場合に指定します。
「"5"」のように
整数の「ピクセル数」を指定します。

サンプル

vspace・hspaceを指定

[bodyの中]

<img src="../img/sample.jpg" hspace="20" vspace="20"
width="110" height="70" align="left" border="0" alt="画像の余白">

vspace="20" hspace="20"を指定しています。

marginを指定

[bodyの中]

<div style="float: left; margin-right:10px;">
<img src="../img/sample.jpg" width="110" height="70"
align="left" style="border:0;" alt="画像の余白">
</div>

float: left; margin-right:10px;を指定しています。

float・marginを指定
テキストと
画像との間の余白を作ります。
ピクセルを指定します。

[ブラウザ上]

画像の余白

float: left; margin-right:10px;を指定しています。

float・marginを指定
テキストと
画像との間の余白を作ります。
ピクセルを指定します。


Copyright c 2007.10.01 luc All rights reserved.