HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは!
今日も頑張ろう

margin プロパティの注意事項

説明

概要

margin プロパティを使う場合に注意しなければいけない、重なりによる相殺、マイナス値の指定、ボックスの配置などの使用方法を説明します。

縦方向の margin が重なる場合には、margin の相殺(大きい方を採用)が発生します。

margin プロパティを指定しても思うように余白が確保できな場合は、margin の相殺が発生していることがあります。

margin の相殺は、縦方向の margin の重なりで発生します。横方向の margin の重なりでは発生しません。

margin にマイナス値を指定することで他のボックスと重なった配置にすることができます。

左右の margin に auto を指定することでボックスの余白の割り当てを指定することができます。

marginの相殺
marginの相殺
marginの相殺
marginの相殺
marginの相殺

(1) margin の相殺(上下の margin が重なっている場合)

ソースコード表示(上下の margin が重なっている場合)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(marginの相殺-1)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box1, .box2 {
	width: 400px;
	height: 200px;
}
.box1 {
	margin-bottom: 15px;
	background: aqua;
}
.box2 {
	margin-top: 30px;
	background: yellow;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box1">.box1<br>margin-bottom: 15px;</div>
		<div class="box2">.box2<br>margin-top: 30px;</div>
	</div>
</body>
</html>

(2) margin の相殺(親と子の margin が重なっている場合)

ソースコード表示(親と子の margin が重なっている場合)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(marginの相殺-2)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box1, .box2, .box2-1 {
	width: 400px;
	height: 200px;
}
.box1 {
	margin-bottom: 15px;
	background: aqua;
}
.box2 {
	margin-top: 30px;
	background: yellow;
}
.box2-1 {
	margin-top: 60px;
	background: pink;
	width: 300px;
	height: 50px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box1">.box1<br>margin-bottom: 15px;</div>
		<div class="box2">
			<div class="box2-1">子要素 .box2-1<br>margin-top: 60px;</div>
			親要素 .box2<br>margin-top: 30px;
		</div>
	</div>
</body>
</html>

(3) margin の相殺(親と子の位置に差がある場合)

ソースコード表示(親と子の位置に差がある場合)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(marginの相殺-3)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box1, .box2, .box2-1 {
	width: 400px;
	height: 200px;
}
.box1 {
	margin-bottom: 15px;
	background: aqua;
}
.box2 {
	margin-top: 30px;
	background: yellow;
}
.box2-1 {
	margin-top: 60px;
	background: pink;
	width: 300px;
	height: 50px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box1">.box1<br>margin-bottom: 15px;</div>
		<div class="box2">
			テキスト
			<div class="box2-1">子要素 .box2-1<br>margin-top: 60px;</div>
			親要素 .box2<br>margin-top: 30px;
		</div>
	</div>
</body>
</html>

(4) margin にマイナス値を指定した場合

ソースコード表示(margin にマイナス値を指定した場合)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(marginの相殺-4)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box1, .box2 {
	width: 400px;
	height: 200px;
}
.box1 {
	background: aqua;
}
.box2 {
	margin-top: -100px;
	background: #ffff0080;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box1">.box1</div>
		<div class="box2">.box2<br>margin-top: -100px;</div>
	</div>
</body>
</html>

(5) margin の左右に auto を位置した場合

ソースコード表示(margin の左右に auto を位置した場合)

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(marginの相殺-5)</title>
<style>
body {
	margin: 0;
}
.container {
	border: #ccc 1px solid;
}
.box1, .box2, .box3 {
	width: 400px;
	height: 200px;
	margin: 20px 0 20px 0;
	background: aqua;
}
.box1-1 {
	width: 60%;
	background: yellow;
}
.box2-1 {
	width: 60%;
	margin: 0 0 0 auto;
	background: yellow;
}
.box3-1 {
	width: 60%;
	margin: 0 auto;
	background: yellow;
}
</style>
</head>
<body>
	<div class="container">
		<div class="box1">.box1<br> 
			<div class="box1-1">.box1-1<br>width: 60%;<br>margin: (指定なし)</div>
		</div>
		<div class="box2">.box2<br> 
			<div class="box2-1">.box2-1<br>width: 60%;<br>margin: 0 0 0 auto;</div>
		</div>
		<div class="box3">.box3<br> 
			<div class="box3-1">.box3-1<br>width: 60%;<br>margin: 0 auto;</div>
		</div>
	</div>
</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎