HTML CSS

[CSS] 마진 상쇄

melius102 2019. 12. 20. 20:38

Margin Collapsing

https://seungwoohong.tistory.com/26

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

 

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>margin collapsing</title>
	<style>
		.line { /*border: 1px solid grey;*/	}
		.comm { border: 1px solid black; padding:20px; margin:10px; }
		.box1 { background: red; }
		.box2 { background: gold; }
		.box3 { background: green; }
		.box4 { background: blue; }
	</style>
</head>
<body>
	<div>
		<div class="line">
			<div class="comm box1">box1</div>
			<div class="comm box2">box2</div>
		</div>
		<div class="line2">
			<div class="comm box3">box3</div>
			<div class="comm box4">box4</div>
		</div>
	</div>
</body>
</html>