더북(TheBook)

6.3.1 margin 영역

첫 번째로 배울 영역은 margin입니다. margin은 박스 모델에서 가장 외부에 있는 영역으로, 요소의 외부 여백을 담당합니다.

그림 6-21 margin 영역

박스 모델은 사각형 모양이라서 각 방향에 해당하는 속성이 독립적으로 존재합니다. margin 영역을 다룰 때 사용할 수 있는 속성으로는 margin-top, margin-right, margin-bottom, margin-left가 있고, 모든 방향을 통합해 margin 속성으로 사용할 수도 있습니다. 속성값에는 크기를 넣으면 됩니다.

형식

margin-top:<크기>;
margin-right:<크기>;
margin-bottom:<크기>;
margin-left:<크기>;
margin:<margin-top> <margin-right> <margin-bottom> <margin-left>;
margin:<margin-top> <margin-right> <margin-bottom>;
margin:<margin-top & margin-bottom> <margin-right & margin-left>;
margin:<margin-top & margin-right & margin-bottom & margin-left>;
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.