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

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

目次

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つのマージンの値が両方とも正の値で上下に重なった場合、値が大きい方のマージンが設定されます。

  

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

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

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

図1

図2

 

右のボックスの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>

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

テスト

関連の記事

CSS 幅と高さを指定するサンプル(widthとheight)
CSS 最大の幅を指定するサンプル(max-width)
CSS 最小の幅を指定するサンプル(min-width)
CSS 幅と高さのパディング、ボーダーの表示方法を指定するサンプル(box-sizing)
CSS 要素の枠内の余白を指定するサンプル(padding)
CSS テーブルの枠線を重ねる/離すサンプル(border-collapse)
CSS テーブルの枠線の間隔を指定するサンプル(border-spacing)
CSS ボーダーの表示方法を指定するサンプル(border)




△上に戻る