Margins around OBJECTS

vspace 属性と hspace 属性は IMG, APPLET, OBJECT 要素の左右、上下に挿入する空白（マージン）の大きさを指定します。

vspace, hspace の使用例；

<img src="../back.jpg" width="50" height="86"
  align="bottom" hspace="50" vspace="5">

上の例では、上下に其々 5 ピクセル、左右に其々 50 ピクセルの空白が挿入されるように設定されています。

表示サンプル；

画像要素を挿入します。この画像要素には hspace 属性と vspace 属性が与えられています。

hspace 属性が水平方向の余白、 vspace が垂直方向の余白を表わします。

普通のブラウザでは問題は生じませんが、 N.C.4.x 系のブラウザに限り、 CSS との競合によって表示が酷く乱れることがあります。特に、 'line-height' との相性は最悪です。

非推奨属性である align 属性が利用されていますが、出来るだけスタイルシートを利用するように御奨めします。

vspace と hspace の説明

これらの属性は、旧版との下位互換のために Transitional DTD で用意されてはいますが、廃止予定の非推奨属性です。出来る限りスタイルシートを利用するように御奨めします。

浮動要素の例

表示サンプル；

画像の貼り付けの例として、ダビンチのモナリザを文章中に置いてみる。

これは align="left" を指定した画像です。画像が左側に寄せられ、後続する要素は右側に流れ込みます。

左右に 50 ピクセル、上下に 5 ピクセルの空白を挿入するように指定してあります。
<BR clear="left"> で後続する要素の周り込みを禁止できます。

上の例における、画像要素のソースは次のようになります；

浮動画像との併用；

<img src="http://www.louvre.or.jp/louvre/img/photos/collec/peint/vignet/inv0779.jpg"
    width="84" height="130" align="left" vspace="5" hspace="50">

vspace 属性、 hspace 属性、 align 属性は何れも廃止予定の非推奨属性ですから、出来る限りスタイルシートを利用するように御奨めします。

CSS による実現

CSS では、要素の周囲の空白の量を指定するために、 margin プロパティが存在します。

margin プロパティは簡略化プロパティで、　margin-top, -right, -bottom, -left プロパティを一箇所で指定できるものです。

margin プロパティは、値を一つから、四つまで取り得ます（或は唯一つの inherit と云うキーワードも取り得ます）。

margin	`[ [<length> \| <%> \| auto] {1,4} ] \| inherit`

値は多くの単位が利用可能ですが、ここでは次の単位しか紹介しません；

解像度で指定する「ピクセル」か、一文字分の大きさを表す「 em 」の利用を御奨めします。

文書内の全ての P 要素のマージンを指定；

<head>
<title>vertical-align の例</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
<!--
p { margin: 1em 4em }
-->
</style>
</head>

この例では、当該文書中の全ての P 要素の周りの空白が、上下を一文字分、左右を四文字分になるように設定されています。

ただし、こうして指定した空白は、上下に隣接する要素の間で相殺します。今の場合は、隣接する段落要素の上下方向の空白（マージン）は「一文字＋一文字」ではなく、相殺されて「一文字」になります。

隣接する要素に於いて、上の要素の下マージンが 10 、下の要素の上マージンが 20 とすると、これらの要素の間の実際のマージンは、相殺されて 20 になります。 10 + 20 = 30 ではないことに注意してください。

ただし、マージンの相殺は、浮動要素に対するマージンの場合には起こりません。浮動要素のマージンは如何なるマージンとも相殺しません。

CSS の基本的な使い方に付いては、「CSS の紹介」を参照ください。また、 'margin' プロパティに関するより詳しい使い方は、「CSS 入門」を参照ください。

オブジェクト周りの余白

vspace と hspace の説明

浮動要素の例

CSS による実現