Margin 개별 속성

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin - 개별 속성</title>
    <link rel="stylesheet" href="css/04_margin_property.css">
</head>
<body>
    <center><h1>margin 개별 속성</h1></center>
    <div class="container">
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </div>
</body>
</html>
HTML
복사

CSS

.container {
    position: relative;
    width: 1200px;
    border: 3px dashed orange;
    margin: auto;
}

section {
    margin-top: 20px;           /* mt20 ⬆ */
    margin-right: 40px;         /* mr40 ➡ */
    margin-bottom: 80px;        /* mb80 ⬇ */
    margin-left: 160px;         /* ml160 ⬅ */
    width: 200px;               /* w200 ↔ */
    height: 200px;              /* h200 ↕ */
    display: inline-block;      /* dib 🍗 */
    border: 3px solid gray;   /* border 🟩 */
}
CSS
복사