margin/CSS/HTMLの基本を学ぶ/ウェブ作成に役立つ情報サイト/It's a long way to the top

margin

Home>CSS>プロパティリファレンス>margin

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

marginプロパティの役割

marginプロパティはボックスの上下左右の余白を指定します。

marginプロパティに設定できる値

値をいくつ指定するかによって、余白の指定箇所が決まります。

4つ指定 上、右、下、左の余白
3つ指定 上、左右、下の余白
2つ指定 上下、左右の余白
1つ指定 上下左右の余白を一括指定

marginプロパティに指定する値は以下の3種類です。

auto 自動的に設定。
数値 数値+単位で指定。
ボックスの高さを100とする百分率。

marginプロパティの使い方

<img style="margin:20px 10px 20px 30px" src="../../../data/img/global/logo.jpg" width="160" height="100" alt="marginプロパティの確認" />

marginプロパティの確認

上のサンプルでは、画像の四辺に余白をそれぞれ、上(20ピクセル)、右(10ピクセル)、下(20ピクセル)、左(30ピクセル)を指定しています。

関連リンク

よく読まれている記事

UpDate:2010-8-28