Margin 과 Padding 으로 공간 조절하기.

Margin 과 Padding 으로 공간 조절하기

Margin 과 padding 은 내용주변에 공간을 준다. 이 프로퍼티를 사용하여 엘리먼트를 서로 떼어놓거나 내용과 테두리 사이에 공백을 삽입할수있다. 예를 들면, 왼쪽의 네비게이션 메뉴와 오른쪽의 주요 페이지 내용사이에 공간을 줄수 있다. 사진의 외곽에서 border 를 떨어 뜨리고 싶을 경우 사용하면 된다.

Padding 과 margin 은 비슷한 기능을 하므로 만일 테두리나 배경 색상을 적용하지 않는 다면, 두 태그 사이의 공간이 padding으로 생긴 건지 margin 으로 생긴 것인지 실제로 구분 할수가 없다 . 그러나 만약 엘리먼트 둘레에 테두리가 있거나 엘리먼트 뒤에 배경이 있다면, 두 프로퍼티 간의 차이가 두드러져 구분하기 쉽다. Padding 은 내용물과 테두리 사이에 공간을 주고 내용을 박스 안에서 비좁아 보이지 않도록 하며, margin 은 엘리먼트 사이에 페이지 전체 외관을 좀더 경쾌하게 만드는 공백부분을 넣어준다

엘리먼트의 margin 이나 padding 을 각 변마다 따로 조절할 수 있다. 변의 margin 을 조정하는 네 개의 프로퍼티는 다음과 같다. margin-top, margin-right, margin-bottom, margin-left. 마찬가지로 변의 padding 을 조정하는 네 개의 프로퍼티다. padding-top, padding-right, padding-bottom, padding-left. 유효한 CSS 치수를 이용하여, 다음과 같이 margin 또는 padding 의 크기를 정의하면 된다.

• margin-right:20px;
• padding-top:3em;
• margin-left:10%;

픽셀과 em은 공통으로 사용되며 텍스트에서와 마찬가지로 적용한다. margin 20px 은 20px 의 공간을 주고, padding 3em 은 스타일 정의된 엘리먼트 글자크기의 3배만큼 공간을 주게 된다. 백분율 값도 사용할수 있지만 까다롭다

Tip : Margin 이나 padding 간격을 전부 없애려면 0을 사용한다( margin-top:0 또는 padding-bottom:0). 브라우저 창의 네 가장자리 주변공간을 모두 없애려면, 즉 배너나 로고 또는 다른 페이지 엘리먼트를 가장자리에 붙이려면, body 태그에 margin과 padding 값을 둘다 "0" 으로 주면된다. (margin:0;padding0). 오페라를 제외한 대부분 브라우저에서는 margin 프로퍼티가 사용가능하다. 오페라에서는 padding 을 0 으로 지정해야한다.

여백(margin) 과 내부공백(padding), 백분율(%)

백분율을 사용할 경우, 웹브라우저는 포함하고 있는 엘리먼트의 폭을 기준으로 한 공간을 계산한다. 간단한 웹페이지에서 포함하는 엘리먼트는 페이지의 body 이며 body는 브라우저 창을 가득 메운다. 여기서 백분율값은 언제나 브라우저 창 너비를 기준으로 한다. 창 폭이 760px 라고 가정하면, 10%의 왼쪽 margin 은 스타일 정의된 엘리먼트의 왼쪽 가장자리에 75px 의 공간을 준다. 그러나 브라우저 창의 크기를 변경하면, 그 값은 바뀐다. 브라우저 창을 600px 로 좁히면 margin 값이 60px 로 변경된다.

하지만 포함하는 엘리먼트가 항상 브라우저 창의 너비와 같은 것은 아니다. 세련된 레이아웃을 만들기 위해서는 페이지를 조직화해 주는 새로운 엘리먼트를 도입 할수 있다. 관련 컨텐츠를 사이드바 영역으로 분류하기 위해 페이지에 <div> 태그를 넣고 싶을지도 모른다. 그 사이드바의 너비가 300px 라고 가정하자. 사이드 바안의 태그들은 자신들을 포함하고 있는 엘리먼트가 <div> 태그라고 생각한다. 따라서 우측 margin 이 10%인 사이드바 안의 태그 오른쪽에는 30px의 빈 공간이 생길것이다. 더 복잡하게는, 상단과 하단의 백분율 값은 포함하는 엘리먼트의 높이가 아닌 너비를 기준으로 계산한다. 따라서 20%의 상단 여백은 스타일 정의된 태그를 포함하고있는 엘리먼트 너비의 20%가 된다