HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>padding</title>
<link rel="stylesheet" href="css/01_padding.css">
</head>
<body>
<center><h1>padding</h1></center>
<div class="container">
<!-- class 속성의 값은 여러 개 지정 가능 -->
<!-- section.item.box$*4 -->
<section class="item box1"></section>
<section class="item box2"></section>
<section class="item box3"></section>
<section class="item box4"></section>
</div>
</body>
</html>
HTML
복사
CSS
.container {
position: relative;
width: 1200px;
border: 3px solid orange;
/* bd3-s-orange */
text-align: center;
}
.item {
width: 100px;
height: 100px;
line-height: 100px;
/* lh100px */
border: 1px solid gray;
/* bd1-s-gray */
background-color: #ddd;
}
.box1 { padding: 20px 40px 80px 100px; }
.box2 { padding: 20px 40px 80px; }
.box3 { padding: 20px 40px; }
.box4 { padding: 20px; }
CSS
복사