티스토리 뷰
문서의 요소의 바깥쪽 여백(빈 공간) 크기를 설정하는 속성
숫자 뒤에 단위 px를 표시한다
여백의 방향마다 다르게 설정할 수 있다
1. margin : 20px -> 위/아래/왼쪽/오른쪽 모두 20px 만큼 여백을 늘린다
2. margin : 10px 20px -> 위/아래 10px, 왼쪽/오른쪽 20px만큼 여백을 늘린다
3. margin : 10px 20px 30px 40px -> 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px만큼 여백을 늘린다
4. margin : 10px 20px 30px -> 위 10px, 왼쪽/오른쪽 20px, 아래 30px만큼 여백을 늘린다
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
border: 2px solid #111;
display: inline-block;
background-color: #d2f4ff;
margin: 5px 15px;
}
.container .box1 {
width: 120px;
height: 80px;
background-color: #fde6ff;
border: 1px solid rgb(255, 212, 212);
margin : 20px;
}
.container .box2 {
width: 120px;
height: 80px;
background-color: #fde6ff;
border: 1px solid rgb(255, 212, 212);
margin : 10px 20px;
}
.container .box3 {
width: 120px;
height: 80px;
background-color: #fde6ff;
border: 1px solid rgb(255, 212, 212);
margin : 10px 20px 30px 40px;
}
.container .box4 {
width: 120px;
height: 80px;
background-color: #fde6ff;
border: 1px solid rgb(255, 212, 212);
margin : 10px 20px 30px;
}
</style>
</head>
<body>
<section class="container">
<div class="box1">margin : 20px</div>
</section>
<section class="container">
<div class="box2">margin : 10px 20px</div>
</section>
<section class="container">
<div class="box3">margin : 10px 20px 30px 40px</div>
</section>
<section class="container">
<div class="box4">margin : 10px 20px 30px</div>
</section>
</body>
</html>
결과
댓글
© 2018 webstoryboy