2. Block의 특징(1)-margin

<mrgin>

block의 경계로부터 바깥 공간

 

block의 경우에는 상하좌우에 모두 적용할 수 있지만, inline의 경우에는 높이와 너비를 가질 수 없기에 좌우에만 적용이 가능함.

주황색의 부분이 margin

 

1) margin: 20px;

block의 바깥 공간이 20이 생김.

위치를 지정하지 않고 margin값을 1개 입력 시 block의 상하좌우에 모두 적용됨.

 

2) margin-left: 50px;

block의 왼쪽 바깥 공간만 50이 생김.

왼쪽 외에도 오른쪽, 위쪽, 아래쪽도 할 수 있음.

 

3) margin: 50px 20px;

block의 상하로는 50이 좌우로는 20의 바깥 공간이 생김.

margin: __px __px;  => 나란히 두 개의 값을 작성할 경우 자동으로 앞에 값은 '상하'로 뒤에 값은 '좌우'로 적용됨.

 

4) margin: 30px 50px 20px 10px;

block의 왼쪽에 10, 위쪽에 30, 오른쪽에 50, 아래쪽에 20의 바깥 공간이 생김.

margin: __px __px __px __px; => 나란히 네 개의 값을 작성할 경우 자동으로 앞에서부터 '위, 오른쪽, 아래, 왼쪽' 순으로 적용됨.

 

 

 # collapsing margin 현상

 

위의 그림에서 보듯이 A와 B의 경계가 같을 떄 두 margin은 하나로 취급됩.

'상하'의 margin에서만 일어나는 현상임.

A의 margin과 B의 margin을 떨어뜨려서 collapsing margin현상이 일어나지 않게 하기 위해선

padding에 대해서 알고 적용하면 됨.