🥑 요소의 여백 설정
📌 margin
요소의 테두리 바깥쪽 여백을 설정한다
margin : 전체 (상하좌우);
margin : 상하 좌우;
margin : top right bottom left;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.body {
border: 2px solid grey;
width: 200px;
height: 150px;
}
div.top, div.mid, div.bottom {
width: 100px;
height: 100px;
background-color: lightcoral;
border: 2px solid grey;
}
div.top {
margin: 10px;
}
div.mid {
margin: 10px 20px;
}
div.bottom {
margin: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div class="body">
<div class="top">1번</div>
<!-- 전체 10px 여백 -->
</div>
<div class="body">
<div class="mid">2번</div>
<!-- 상하는 10px 여백, 좌우는 20px -->
</div>
<div class="body">
<div class="bottom">3번</div>
<!-- 상:10px, 우:20px, 하:30px, 좌:40px -->
</div>
</body>
</html>
다음과 같이 1,2,3번은 모두 같은 div지만 margin의 크기에 따라 위치가 조금씩 달라졌음을 볼 수 있다.
📌 padding
요소의 테두리 안쪽 여백을 지정한다
- 내용과 테두리 사이의 여백이다.
- padding은 margin과 문법은 동일하고, 요소의 크기에 영향을 준다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 2px solid grey;
background-color: lemonchiffon;
width: 100px;
height: 100px;
}
div.top {
padding: 0px;
}
div.mid {
padding: 10px;
}
div.bottom {
padding: 20px;
}
</style>
</head>
<body>
<div class="top">padding으로 여백주기1</div>
<!-- 여백 없음 -->
<div class="mid">padding으로 여백주기2</div>
<!-- 여백 10px -->
<div class="bottom">padding으로 여백주기3</div>
<!-- 여백 20px -->
</body>
</html>
그림을 보면 글자와 네모 도형 테두리 사이의 간격이 점점 넓어지는 것을 확인할 수 있다.
이 간격에 관여하는 것이 padding이다.
기초부터 시작하는 감쟈 ※ 소개글 확인해주세요!! ※