領域の外側に余白を取る - CSS margin プロパティの利用 - CSS
CSSを利用して、領域の外側に余白を取るコードを紹介します。
概要
領域の外側に余白を取る場合は、margin プロパティを利用します。上下左右のマージンを個別に設定する場合は、margin-left, margin-top, margin-right, margin-bottom プロパティも利用できます。
書式
margin: (上下マージンのサイズ) (左右マージンのサイズ)
margin: (上マージンのサイズ) (左右マージンのサイズ) (下マージンのサイズ)
margin: (上マージンのサイズ) (左右マージンのサイズ) (下マージンのサイズ)
margin: (上マージンのサイズ) (右マージンのサイズ) (下マージンのサイズ) (左マージンのサイズ)
書式 (上下左右を指定する場合)
左マージンを指定する
右マージンを指定する
margin-right: (右マージンのサイズ)
上マージンを指定する
下マージンを指定する
margin-bottom: (下マージンのサイズ)
解説
marginプロパティを用いた場合は上下左右の余白を一括で設定できます。上下左右それぞれの余白を設定する場合は、margin-top, margin-bottom, margin-left, margin-right プロパティが用意されています。
| プロパティ名 | 設定 |
|---|
| margin | 上下左右の領域の外側の余白を設定します。 |
| margin-top | 上の領域の外側の余白を設定します。 |
| margin-bottom | 下の領域の外側の余白を設定します。 |
| margin-left | 左の領域の外側の余白を設定します。 |
| margin-right | 右の領域の外側の余白を設定します。 |
複数の値を与えた場合の動作
marginプロパティには、複数の値を設定できます。値の個数と設定内容は以下の表のとおりです。
| margin:(サイズ) | 上下左右に指定したサイズの余白を設定します。 |
| margin:(サイズ1) (サイズ2) | 上下を(サイズ1)、左右を(サイズ2)の余白を設定します。 |
| margin:(サイズ1) (サイズ2) (サイズ3) | 上を(サイズ1)、左右を(サイズ2)、下を(サイズ3)の余白に設定します。 |
| margin:(サイズ1) (サイズ2) (サイズ3) (サイズ4) | 上を(サイズ1)、右を(サイズ2)、下を(サイズ3)、左を(サイズ4)の余白に設定します。 |
マージンのサイズ指定
以下の指定方法があります。
| 書式 | 記述例 | 説明 |
|---|
| 単位 | 数値+単位 | margin:4px | 指定した数値の単位で指定します。 |
| % | 数値+% | margin:2% | 画面のサイズに対する%で指定します。 |
| auto | auto | margin:auto | 自動とします |
使える単位の一覧
| 値 | 説明 | 例 |
|---|
| px | ピクセル | margin:20px |
| em | "M"の高さを基準とした大きさ | margin:2em |
| ex | "x"の高さを基準とした大きさ | margin:3ex |
| mm | ミリメートル | margin:10mm |
| cm | センチメートル | margin:2cm |
| in | インチ | margin:4in |
| pt | ポイント | margin:2pt |
| pc | パイカ | margin:1pc |
書式例
.MarginFrame {
margin-top:32px;
margin-left:64px;
}
.MarginFrame {
margin:4px 4px 12px 4px;
}
コード例1
下記のコードを記述します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="SimpleMargin01.css" />
</head>
<body>
<div class="BaseCanvas">
<div class="MarginFrame">テキストです。ABCDEFG。あいうえお。</div>
</div>
</body>
</html>
.BaseCanvas {
margin-left: 32px;
margin-right: 32px;
margin-top: 32px;
width: calc(100%-64px);
height: 400px;
background-color: #E0E0E0;
border:solid 1px #202020;
}
.MarginFrame {
width: 160px;
background-color: #fff2a9;
border: solid 1px #ff6a00;
margin:32px 0px 0px 64px;
}
解説
MarginFrameでMarginプロパティの動作を確認します。"margin:32px 0px 0px 64px" が記述されていますので、MarginFrameは上部に32pxの余白を開けます。また、左は64pxの余白を開ける動作となります。
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
黄色の枠(MarginFrame)が外側の灰色の枠(BaseCanvas)に対して、左側の余白が64ピクセル、上側の余白が32ピクセル開いていることが確認できます。
MarginFrameがCSSで指定した余白を取っていることが確認できます。
コード例2
コード
下記のコードを記述します。
body {
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.OutFrame {
border: solid 4px #0000FF;
width:640px;
height:320px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.SimpleMargin{
border: solid 1px #808080;
width: 280px;
height: 160px;
margin: 16px 16px 16px 16px;
padding: 32px 32px 32px 32px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="MarginPadding01.css" />
</head>
<body>
<div class="OutFrame">
<div class="SimpleMargin">フレームです <br />
あいうえおかきくけこさしすせそたちつてとなににぬねのはひふへのまみむめもやゆろらりるれろわをん
</div>
</div>
</body>
</html>
実行結果
HTMLを表示すると下図の状態で表示されます。
細線の枠が、外側の太青線の枠から上から16ピクセル、左から16ピクセル余白を開けて表示されています。
コード例3
コード
下記のコードを記述します。
body {
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.OutFrame {
border: solid 4px #0000FF;
width:640px;
height:480px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.SimpleMargin{
border: solid 1px #808080;
width:280px;
height:200px;
margin-left: 120px;
margin-right: 16px;
margin-top: 16px;
margin-bottom: 16px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="MarginPadding.css" />
</head>
<body>
<div class="OutFrame">
<div class="SimpleMargin">フレームです <br />
あいうえおかきくけこさしすせそたちつてとなににぬねのはひふへのまみむめもやゆろらりるれろわをん
</div>
</div>
</body>
</html>
実行結果
HTMLを表示すると下図の状態で表示されます。細線の枠が、外側の太青線の枠から上から16ピクセル、左から120ピクセル余白を開けて表示されています。
margin と width,height の関係
下記のコードを記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="SimpleMargin02-1.css" />
</head>
<body>
<div class="BaseCanvas">
<div class="MarginFrame">marginプロパティは枠の外側の余白を設定するプロパティです。</div>
</div>
</body>
</html>
.BaseCanvas {
margin: 32px 32px 0 32px;
width: calc(100%-64px);
height: 320px;
background-color: #E0E0E0;
border:solid 1px #202020;
}
.MarginFrame {
width: 160px;
background-color: #fff2a9;
border: solid 1px #ff6a00;
margin:96px 0px 0px 180px;
}
上記のHTMLをWebブラウザで表示すると、下図の画面が表示されます。
黄色の枠(MarginFrame)の幅は、widthプロパティで指定した、160ピクセルに設定されています。
paddingプロパティのように、マージンの値を含めた幅にはなりません。
スタイルシート部分を下記に変更します。heightプロパティの値も指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="SimpleMargin02-2.css" />
</head>
<body>
<div class="BaseCanvas">
<div class="MarginFrame">marginプロパティは枠の外側の余白を設定するプロパティです。</div>
</div>
</body>
</html>
.BaseCanvas {
margin: 32px 32px 0 32px;
width: calc(100%-64px);
height: 320px;
background-color: #E0E0E0;
border:solid 1px #202020;
}
.MarginFrame {(
width: 120px;
height:220px;
background-color: #fff2a9;
border: solid 1px #ff6a00;
margin:96px 0px 0px 180px;
}
上記のhtmlをWebブラウザで表示すると、下図の画面が表示されます。黄色の枠(MarginFrame)の高さは、heightプロパティで指定した高さになります。マージンを含めた高さにはなりません。
marginプロパティ設定したサイズの余白が表示されない
marginプロパティで値を設定しても、設定したサイズの余白が表示されないことがあります。CSS marginプロパティは隣接する要素がmarginプロパティを持つ場合、
marginが相殺される動作になります。詳しくは
こちらの記事を参照してください。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
掲載日: 2017-10-04
改訂日: 2023-03-05
