margin
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プロパティの確認" />
上のサンプルでは、画像の四辺に余白をそれぞれ、上(20ピクセル)、右(10ピクセル)、下(20ピクセル)、左(30ピクセル)を指定しています。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-8-28