여백을 조절하는 속성
1. margin 속성 (백과사전 바로가기)
- 요소 주변 여백 설정
- 한 요소와 다른 요소 사이의 간격 조절 가능
- margin-left와 margin-right의 값을 auto로 하면, 웹 요소를 중앙에 배치할 수 있음
2. 마진 중첩(margin overlap) 현상
- 요소를 세로로 배치할 경우, 마진과 마진이 만날 때, 큰 값을 기준으로 겹쳐지는 현상
※ 가로는 겹치지 않음
- margin= 30px;로 설정할 경우, 30px+30px=60px가 아닌 30px로 설정됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
div {
width: 100px;
height: 50px;
margin: 30px;
}
.a {background-color: red;}
.b {background-color: blue;}
.c {background-color: green;}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html>
3. padding 속성 (백과사전 바로가기)
- 콘텐츠 영역과 테두리 사이 여백 설정
'Front-End Study > HTML+CSS' 카테고리의 다른 글
| 노멀라이즈 (0) | 2022.09.29 |
|---|---|
| 요소 가운데 정렬 (0) | 2022.09.26 |
| 박스 모델(Box Model) (0) | 2022.09.25 |
| 한칸 띄우기 (0) | 2022.09.21 |
| 반응, 상태, 구조 선택자 (0) | 2022.09.21 |