画像と文字の上下間隔を指定する
画像の余白に文字を回り込ませる際に、画像と文字の左右間隔を指定することができます。
<img src="画像URL" align="画像表示位置" vspace="画像と文字の上下間隔">
- 画像表示位置:『left』(文章を右に回り込ませる)または『right』(文章を右に回り込ませる)から指定できます。
- 画像と文字の上下間隔:数値で指定します。値はピクセルになります。
<img src="./sample/millenario.jpg" width="160" height="120" align="left" vspace="20" alt="東京ミレナリオ2006">
■2006年1月1日■<br>
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまうそうです。<br>
再開の目処はたっていないとのことだったので、今回見ることができてよかったです。<br>
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。
■2006年1月1日■<br>
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまうそうです。<br>
再開の目処はたっていないとのことだったので、今回見ることができてよかったです。<br>
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。
このソースを表示させると、次のようになります。わかりやすいように少し大げさ( 20 ピクセル)に間隔を指定してみました。
■2006年1月1日■東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまうそうです。
再開の目処はたっていないとのことだったので、今回見ることができてよかったです。
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。
ただし この指定は、画像の上下に余白を設けるものなので、ご覧のとおり上側にも20ピクセルの余白が生まれます。上側にも間隔が空いてしまうのが好ましくない場合は、vspace属性ではなく、スタイル指定で余白(マージン)を設けるのがよいでしょう。
この場合、ソースは次のようになります。
<img src="./sample/millenario.jpg" width="160" height="120" align="left" style="margin-bottom:20px" alt="東京ミレナリオ2006">
■2006年1月1日■<br>
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまうそうです。<br>
再開の目処はたっていないとのことだったので、今回見ることができてよかったです。<br>
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。
■2006年1月1日■<br>
東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまうそうです。<br>
再開の目処はたっていないとのことだったので、今回見ることができてよかったです。<br>
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。
このソースでは、画像の左側に 20pxの余白(マージン)を設けています。表示させると、次のようになります。
■2006年1月1日■東京ミレナリオ2005-2006を見てきました。来年から東京駅の工事に伴い休止となってしまうそうです。
再開の目処はたっていないとのことだったので、今回見ることができてよかったです。
12月31日の21:00にいったん消灯し、1月1日の0:00~3:00まで再点灯するのですが、ミレナリオでのカウントダウンにたくさんの人が集まり、たいへんにぎやかな雰囲気でした。
マージンについて詳しくは、こちらをご覧ください。
ランキングに参加中です! お役に立てたらクリックをお願いします→
コンピュータとインターネット > データ形式 > HTML > リファレンス