마진영역 설정
Margin
테두리 밖같쪽의 이웃하고 있는 다른 요소들과의 간격들 말합니다.
전체마진
전체 고르게 마진이 적용됩니다.
분리하여 적용
마진을 상/하/좌/우 를 분리하여 적용하고자 할때에는 확장된 속성값을 사용합니다.
- margin-top
- margin-bottom
- margin-left
- margin-right
각각지정
margin
속성에 값을 4개를 주어 상, 우, 하 , 좌 를 구분하여 입력이 가능합니다. 시계방향으로 마진이 주어지게 됩니다.
margin 속성 - 요소 주변 여백 설정하기
마진 속성은 박스의 상하좌우 4개의 면을 가지고 있습니다.
margin-top:속성 값;
margin-right: 속성 값
margin-bottom:속성 값;
margin-left:속성 값;
또한 4개의 값을 한번에 지정할 수도 있습니다.
위쪽 마진,오른쪽 마진,아래쪽 마진,왼쪽 마진을 설정
- 크기 : 너비나 높이 값을 px(픽셀)수치로 지정합니다
- 백분율(%) : 박스 모델을 포함하고 있는 부모 요소를 기준으로 너비나 높이 값을 %로 지정합니다.
- auto : 박스 모델의 너비와 높이 값 콘텐츠 양에 따라 자동으로 결정됩니다. 기본 값입니다.
마진 중첩
요소가 세로로 배치가 될 경우 위쪽 요소의 하단 마진과, 아래쪽 요소의 상단 마진이 겹쳐질때, 값이 큰값이 하나만 적용된는 것을 마진 중첩이라 합니다. 마진 중첩은 가로로 배치될때에는 일어나지 않고, 세로 배치 할때만 발생합니다.
<style>
.box1 {
margin:10px;
}
.box2 {
margin:20px;
}
</style>
<div class="box1">
Box1
</div>
<div class="box2">
box2
</div>
box1과 box2 의 마진 여백이 10+20 = 30 px이 아닌 box2이 마진 20px만 적용됩니다.
네거티브 마진
마진은 패딩과 달리 음수의 값 설정이 가능합니다. 이를 다른 용어로 네거티브 마진이라고도 합니다.
네거티브 마진을 설정하게 되면 다른 요소들과 마진 영역이 겹치는 효과가 발생합니다.
중앙정렬
넓이의 설정값 과 마진설정을 0 auto
로 설정을 합니다.
.container {
width: 960px;
margin: 0 auto;
}
실습 ex/layout2.html
마진
바깥쪽 여백을 의미합니다.
-
1개 : 전체
-
2개 : 상하/좌우
-
3개 : 상 / 좌우 / 하
-
4개 : 위쪽 / 오른쪽 / 하단 / 왼쪽
한방향 설정
margin-top
margin-bottom
margin-left
margin-right
margin: 0 auto
블록요소
의 성격을 가지는 요소를 중앙에 배치할때 사용을 합니다.