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/01_margin.css">
</head>
<body>
<center><h1>margin</h1></center>
<!-- .container>(.item*12) -->
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
HTML
복사
CSS
.container {
position: relative; /* po */
width: 1200px; /* w1200 */
height: 800px; /* h800 */
border: 5px solid orange; /* border */
margin: auto; /* m:auto */
}
.item {
/* m-10-20-30-40 */
margin: 10px 20px 30px 40px; /* ⬆➡⬇⬅ */
/* margin: 10px 20px 30px; */ /* ⬆ (↔) ⬇ */
/* margin: 10px 20px; */ /* (↕)(↔) */
/* margin: 10px; */ /* all */
/* 시계방향 : ⬆➡⬇⬅ */
display: inline-block;
width: 200px;
height: 200px;
border: 3px solid gray;
background-color: #ddd;
}
CSS
복사