2.1 안쪽 여백 (Padding)
안쪽 여백 (padding)은 요소의 내용물과 경계 사이의 공간을 정의해. padding은
요소의 각 면에 대해 설정할 수 있어: 위, 오른쪽, 아래, 왼쪽. 안쪽 여백은
내용물 주위에 공간을 만들어서 경계에 딱 붙지 않게끔 하는 데 유용해.
사용 예시
이 예시에서는 .padding 클래스를 가진 요소에 모든 면에 20픽셀의 안쪽 여백을 적용해서,
내용물 주위에 공간을 생성하고 있어.
CSS
.padding {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
}
HTML
<div class="padding">
이것은 안쪽 여백이 있는 요소입니다.
</div>
2.2 바깥쪽 여백 (Margin)
바깥쪽 여백 (margin)은 요소와 그 주변 요소들 사이의 공간을 정의해. 바깥쪽 여백은
요소의 각 면에 대해 설정할 수 있어: 위, 오른쪽, 아래, 왼쪽. 바깥쪽 여백은
요소들 사이의 공간을 만들어 중첩을 방지하는 데 유용해.
사용 예시:
CSS
.margin {
background-color: #e0e0e0;
border: 2px solid #000;
margin: 20px;
}
HTML
<div class="margin">
이것은 바깥쪽 여백이 있는 요소입니다.
</div>
2.3 블록 모델의 구성 요소 간 상호작용
블록 모델의 네 가지 구성 요소 (내용물, 안쪽 여백, 경계, 바깥쪽 여백)는 함께 작동해서 페이지에서 요소의 총 크기와 위치를 결정해.
구성 요소 간 상호작용 예시:
CSS
.box {
background-color: #e0e0e0;
padding: 20px;
border: 5px solid #000;
margin: 30px;
width: 200px;
}
HTML
<div class="box">
이것은 바깥쪽 및 안쪽 여백이 있는 요소입니다.
</div>
코드 설명:
- 내용물: 요소 안의 텍스트
- 안쪽 여백: 20픽셀, 내용물과 경계 사이의 공간 생성
- 경계: 5픽셀, 요소를 둘러싸고 있는 선
- 바깥쪽 여백: 30픽셀, 요소와 다른 페이지 요소 사이의 공간 생성
2.4 음수 바깥쪽 여백
바깥쪽 여백은 음수 값을 가질 수 있으며, 이는 요소들이 서로 겹치는 결과를 가져올 수 있어.
CSS
.negative-margin {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-top: -12px;
}
HTML
<div>
이것은 일반적인 요소입니다.
</div>
<div class="negative-margin">
이것은 음수 위쪽 여백이 있는 요소입니다.
</div>
2.5 바깥쪽 여백 병합
수직 바깥쪽 여백이 두 개의 인접한 블록에서 만날 때, 이는 하나로 병합될 수 있으며 둘 중 더 큰 여백에 해당해.
CSS
.box1 {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-bottom: 30px;
}
.box2 {
background-color: #d0d0d0;
padding: 20px;
border: 2px solid #000;
margin-top: 20px;
}
HTML
<div class="box1">
이것은 첫 번째 요소입니다.
</div>
<div class="box2">
이것은 두 번째 요소입니다. 바깥쪽 여백이 30픽셀로 병합되었습니다.
</div>
GO TO FULL VERSION