HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>margin inherit</title>
<link rel="stylesheet" href="css/03_margin_inherit.css">
</head>
<body>
<center><h1>margin inherit</h1></center>
<div class="container">
<!-- (section>h2{margin : inherit;})*3 -->
<section>
<h2>margin : inherit;</h2>
</section>
<section>
<h2>margin : inherit;</h2>
</section>
<section>
<h2>margin : inherit;</h2>
</section>
</div>
</body>
</html>
HTML
복사
CSS
.container {
position: relative;
width: 1200px;
border: 3px dashed orange;
margin: auto;
}
section {
/* inherit : 부모요소의 지정값을 물려받아서 적용 */
/*
부모요소 : container
자식요소 : section
*/
width: 900px;
height: 200px;
border: 3px solid gray;
margin: inherit;
/* 부모요소로부터 상속받아 auto 가 적용됨 */
}
CSS
복사