|
{margin:値;}、{margin-位置:値;}で画像の周りに余白を入れることが出来ます。
■ 余白の指定方法
周囲の余白の指定パターンは以下の通り。値が複数ある場合は
半角スペースを入れて記述してください。
| 余白を入れたい位置 |
説明 |
| margin:値; |
値が1個の場合、上下左右 全てに余白が入ります。 |
| margin:値1 値2; |
値1が上下、値2が左右の余白です。 |
| margin:値1 値2 値3; |
値1が上、値2が左右、値3が下の余白です。 |
| margin:値1 値2 値3 値4; |
値1が上、値2が右、値3が下、値4が左の余白です。 |
| margin-top:値; |
上の余白だけ指定します。 |
| margin-right:値; |
右の余白だけ指定します。 |
| margin-left:値; |
左の余白だけ指定します。 |
| margin-bottom:値; |
下の余白だけ指定します。 |
【ブラウザ表示】
画像と文字に20pxの余白ができています。
画像と文字に上20px、左右20px、下20pxの余白ができています。
画像の右側と文字に20pxの余白ができています。
ソース
<img src="./image/space1.gif" alt="画像" class="yohaku1">
画像と文字に20pxの余白ができています。
<img src="./image/space1.gif" alt="画像" class="yohaku2">
画像と文字に上20px、左右20px、下20pxの余白ができています。
<img src="./image/space1.gif" alt="画像" class="yohaku3">
画像の右側と文字に20pxの余白ができています。
外部ファイル
img.yohaku1{margin:20px;}
img.yohaku2{margin:20px 20px 20px;}
img.yohaku3{margin-right:20px;}
<body>～</body>に直接記入する場合
<img src="./image/space1.gif" alt="画像" style="margin:20px;">
画像と文字に20pxの余白ができています。
<img src="./image/space1.gif" alt="画像" style="margin:20px 20px 20px;">
画像と文字に上20px、左右20px、下20pxの余白ができています。
<img src="./image/space1.gif" alt="画像" style="margin-right:20px;">
画像の右側と文字に20pxの余白ができています。
■ その他の項目
・
画像に枠線を入れる
・
画像の横に文字を回り込ませる
・
画像に並ぶ文字の位置を指定する
・
画像の横幅、高さを指定する
・
画像を切り抜く
・
画像のマスクを指定する
スタイルシート一覧のページに戻る
|
