<img src="" alt="" hspace="" vspace="">
img要素に hspace="" と vspace="" を追加すると、画像の周囲に余白を入れることができます。
<img src="sample.gif" alt="サンプル" hspace="10" vspace="10">
属性 | 値 | 説明 |
---|---|---|
hspace="" | ピクセル数 | 左右の余白を指定 |
vspace="" | ピクセル数 | 上下の余白を指定 |
上記の属性は、HTML 4.01では非推奨とされています。(Strict DTDでは使用できません)
この指定内容はスタイルシートで代替することができます。指定方法の詳細は「関連ページ」をご覧ください。
以下の使用例では、align属性と組み合わせて使用しています。
使用例
■左右に30ピクセルの余白を指定した例
<p>
<img src="rainbow.jpg" alt="写真" align="left" hspace="30">
サンプルのテキスト。<br>
サンプルのテキスト。<br>
サンプルのテキスト。<br>
...
</p>
表示例
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
■上下に30ピクセルの余白を指定した例
<p>
<img src="rainbow.jpg" alt="写真" align="left" vspace="30">
サンプルのテキスト。<br>
サンプルのテキスト。<br>
サンプルのテキスト。<br>
...
</p>
表示例
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
■上下左右に30ピクセルの余白を指定した例
<p>
<img src="rainbow.jpg" alt="写真" align="left" hspace="30" vspace="30">
サンプルのテキスト。<br>
サンプルのテキスト。<br>
サンプルのテキスト。<br>
...
</p>
表示例
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
サンプルのテキスト。
- サイト内検索