margin は、マージン（外側の余白）を指定するプロパティです。
img要素にこのスタイルを設定すると、画像の周囲にマージンを入れることができます。
#example {
margin: 5px;
}
| margin | マージンの大きさを指定します |
|---|
マージンの大きさは、数値+単位（px、他）か %（割合）、auto（自動）で指定します。
マージンの指定方法については、ボックスカテゴリーの「マージン・パディング」の項目をご覧ください。
※以下の使用例では、floatプロパティと組み合わせて使用しています。
■上下に30ピクセル、左右に60ピクセルの余白を指定した場合
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example1 { width: 100%; }
#example2 {
float: left;
margin: 30px 60px;
}
-->
</style>
</head>
<body>
<div id="example1">
<img src="image/photo.jpg" alt="サンプル" width="200" height="133" id="example2">
<p>
スタイルシート<br>
を使った ...
</p>
</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
スタイルシート
を使った上下左
右のマージンで
す。
サンプルの文章
を書いてみまし
た。このように
指定すると、画
像と文字の間に
適度な余白を入
れることができ
ます。
この例では、上
下に30ピクセル
のマージンを指
定し左右に60ピ
クセルのマージ
ンを指定してい
ます。
