margin/外側の余白

marginプロパティは外側の余白を上下左右一括で指定出来ます。margin-topは外側の上、margin-rightは右、margin-bottomは下、margin-leftは左の余白になります。

説明

 marginはボックス領域の外側の余白を指定します。

margin説明

 上記の黒枠に対して赤の矢印部分が外側の余白です。

 margin-topが上、margin-rightが右、margin-bottomが下、margin-leftが左の余白の指定で、marginはこれを一括で設定出来ます。

 似た設定にpaddingがありますが、こちらは内側の余白です。

padding説明

構文

 marginプロパティの構文は以下の通りです。

margin: 上の余白 右の余白 下の余白 左の余白;

 以下のように2つ以上をまとめて指定する事も出来ます。

margin: 上下の余白 左右の余白;

margin: 上下左右の余白;

 margin-topプロパティの構文は以下の通りで上の余白だけ指定できます。margin-right、margin-bottom、margin-leftも同様です。

margin-top: 上の余白;

 余白の指定は以下が出来ます。

【marginでの余白の指定】
指定 説明
px ピクセル指定
em 文字の大きさに対する割合
% 幅や高さに対する割合
auto 左右にだけ使え、自動調整します。

margin利用例

 marginの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

div {
margin: 10px 5px 10px 40px;
}

<div>margin例</div>

 上記を表示すると以下になります。尚、分かり易さのため、背景を付けています。

margin例

 黄色の背景の周りで点線までが指定した余白になります。

 上下と左右で指定する場合は以下の通りです。

div {
width:70px;
margin: 2em auto;
}

<div>margin例</div>

 上記を表示すると以下になります。

margin例

 上下に2文字分の余白が取られています。

 又、横幅を70pxと指定してmarginで左右にautoを指定しているため、センタリングになっています。これは4つ別々に指定した時も同様ですが、heigthで高さを指定しても縦方向は中央になりません。

 上下左右一括で指定する場合は以下の通りです。

div {
margin: 20px;
}

<div>margin例</div>

 上記を表示すると以下のようになります。

margin例

 上下左右全ての外側に20pxの余白が取られます。

margin-left利用例

 margin-leftの例は以下の通りです。

div {
margin-left: 20%;
}

<div>margin例</div>

 上記を表示すると以下のように取れる横幅の20%を余白として取ります。

margin例

 margin-leftは左の余白だけ変えたい時に使います。margin-topやright、bottomの使い方も同様です。

補足

 上や下に10%と指定すると高さの10%ではなく、横幅の10%が余白になります。

margin例

 上記ではmargin-topで10%の指定をして、点線の枠で横幅を200pxに指定しているため、上に20pxの余白が出来ます。

関連ページ

・ホームページ作成「ボックスのまとめ

 marginだけでなく、paddingやwidth、背景、枠線、回り込み等、ボックス全体の説明をしています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

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

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)