마진영역 설정

Margin

테두리 밖같쪽의 이웃하고 있는 다른 요소들과의 간격들 말합니다.

전체마진

전체 고르게 마진이 적용됩니다.

margin : 15px;

분리하여 적용

마진을 상/하/좌/우 를 분리하여 적용하고자 할때에는 확장된 속성값을 사용합니다.

margin-top
margin-bottom
margin-left
margin-right

각각지정

margin 속성에 값을 4개를 주어 상, 우, 하 , 좌 를 구분하여 입력이 가능합니다. 시계방향으로 마진이 주어지게 됩니다.

margin : 상 우 하 좌 ;

margin 속성 - 요소 주변 여백 설정하기

마진 속성은 박스의 상하좌우 4개의 면을 가지고 있습니다.

margin-top:속성   값;
margin-right: 속성   값
margin-bottom:속성 값;
margin-left:속성   값;

또한 4개의 값을 한번에 지정할 수도 있습니다.

margin:속성값;

위쪽 마진，오른쪽 마진，아래쪽 마진，왼쪽 마진을 설정

크기 : 너비나 높이 값을 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

블록요소의 성격을 가지는 요소를 중앙에 배치할때 사용을 합니다.

div {
    margin: 0 auto;
}