Margin inherit

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
복사