ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >イメージ

画像の周りに余白を入れる

{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の余白ができています。

■ その他の項目

画像に枠線を入れる
画像の横に文字を回り込ませる
画像に並ぶ文字の位置を指定する
画像の横幅、高さを指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.