margin: 20px 50px 30px
margin-top : 20px
margin-right : 50px
margin-bottom : 30px
ma">
<!-- 03_box-model/03-02_margin_padding.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03-02_margin_padding</title>
<!--
# margin, padding 속성
- margin, padding 속성은 content 의 4개 방향( top, right, bottom, left ) 에 대해서 지정이 가능합니다
-->
<style type="text/css">
div {
border: 1px solid red;
width: 300px;
height: 150px;
}
.box_1 {
/*
margin-top: 20px;
margin-right: 50px;
margin-bottom: 30px;
margin-left: 20px;
*/
margin: 20px 50px 30px 20px;
}
.box_2 {
margin: 20px 50px 30px; /* 위, 왼쪽-오른쪽, 아래 */
}
.box_3 {
margin: 20px 50px; /* 위-아래, 왼쪽-오른쪽 */
}
.box_4 {
margin: 30px; /* 네방향 동일하게 설정 */
}
</style>
</head>
<body>
<h1>margin, padding</h1>
<br/>
<div class="box_1">
margin: 20px 50px 30px 20px<br/>
<br/>
margin-top : 20px<br/>
margin-right : 50px<br/>
margin-bottom : 30px<br/>
margin-left : 20px
</div>
<div class="box_2">
margin: 20px 50px 30px<br/>
<br/>
margin-top : 20px<br/>
margin-right : 50px<br/>
margin-bottom : 30px<br/>
margin-left : 50px
</div>
<div class="box_3">
margin: 20px 50px<br/>
<br/>
margin-top : 20px<br/>
margin-right : 50px<br/>
margin-bottom : 20px<br/>
margin-left : 50px
</div>
<div class="box_4">
margin: 30px<br/>
<br/>
margin-top : 30px<br/>
margin-right : 30px<br/>
margin-bottom : 30px<br/>
margin-left : 30px
</div>
</body>
</html>