CSS 要素の枠外の余白を指定するサンプル(margin)

CSSの要素の枠外の余白を指定するサンプルです。
CSSのmarginプロパティを使用します。

margin プロパティ
コード
サンプル
marginの上下左右の指定
2つの要素のマージンが上下に被った場合
2つの要素のマージンが左右に被った場合
左右のマージンにauto指定してセンタリングする

margin プロパティ

margin : 値　　→　上下左右を指定
margin : 値　値　　→　上下と左右を指定
margin : 値　値　値　　→　上と左右と下を指定
margin : 値　値　値　値　→　上と右と下と左を指定 (時計回りです)

値	説明
数値 + 単位	指定した単位で設定します。
数値 + %	包含ブロックの幅に対する割合で設定します。
auto	自動で調整します。
値を継承しない

初期値は0です。
マージン(margin)は、隣の要素と引き離すために使用します。
ボーダーの外側の余白です。(下の図の黄の部分)
ボーダーは、要素の周りにある線です。
マイナスの値も指定できます。
以下はMDNのmarginプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/margin

コード

サンプルのコードです。
2、5行目でmarginを指定しています。

#test1{
	margin:5px;
}
#test2{
	margin:10px;
}
.c1 div{height:50px;width:200px;
font-size:16px;border: 1px solid #000;}
</style>
</head>
<body>
<div class="c1">
	<div id="test1">5px</div>
	<div id="test2">10px</div>
</div>
</body>
</html>

サンプル

上記コードのサンプルです。
オレンジ色の部分がmarginです。

marginを個別に指定

marginを個別に指定する方法です。

指定方法	意味
margin-top 例：margin-top:10px;	上を指定
margin-right 例：margin-right:10px;	右を指定
margin-bottom 例：margin-bottom:10px;	下を指定
margin-left 例：margin-left:10px;	左を指定

2つの要素のマージンが上下に被った場合

２つのマージンの値が両方とも正の値で上下に重なった場合、値が大きい方のマージンが設定されます。

２つのマージンの値が正の値と負の値の場合は、足した値になります。
２つのマージンの値が両方とも負の値の場合は、小さい方の値になります。

2つの要素のマージンが左右に被った場合

float:leftを指定した左のボックスのmargin-rightが10pxで、右のボックスのmargin-leftが20pxの場合、10pxになります。(以下の図１と図２)

図１

図２

右のボックスのmargin-leftを150pxにしてその左端がブラウザの左端に到達していた場合、右のボックスがブラウザの左端から150pxの幅をとって右にずれます。

左右のマージンにauto指定してセンタリングする

ブロックの要素の左右のマージンにautoを指定すると、その要素をセンタリング（中央に配置)することができます。
7,8行目でmargin-rightとmargin-leftにautoを指定しています。

<style>
#d1{
	border: 1px solid #000;
	width:100%;
}
#d2{
	margin-right:auto;
	margin-left:auto;
	height:50px;
	width:100px;
	border: 1px solid #000;
}
</style>
<body>
<div id="d1">
<div id="d2">テスト</div>
</div>
</body>

上記コードのサンプルです。

テスト