[CSS기초] Margin(마진)과 Padding(패딩) 으로 여백지정하기

패딩과 마진의 속성 차이

[CSS기초] Margin(마진)과 Padding(패딩) 배우기

Box안에는 내용이 들어 있는데 여백을 지정해 줄 필요가 있다.

Padding과 Margin 이 사용되는데, 위에 표를 보시면 이해가 되실 것이다.

패딩(Padding)은 Box안에 내용과 Box 테두리(Border)와의 여백을 말한다.

마진(Margin)은 Box의 테두리(Border)와 그 Box의 바깥 영역요소와의 여백을 말한다.



마진(margin) 관련속성

• 속성 : margin-top, margin-right, margin-bottom, margin-left
• 값 : 길이, 퍼센트, auto, inherit(지정된 폰트사용시)
• 기본값 : 0
• 적용대상 : 모든 요소(표 내부요소제외)

예)

[margin-top: 10px;]

개별적으로 지정시 유리하다.

[post_ads]


마진은 아래와 같이 나타낼 수도 있다.

[margin: 10px 10px 10px 10px;]

이렇게 마진값을 한번에 일괄 지정 할수가 있다. 값은 공백 문자로 구분하여 복수지정할 수 있고 지정하는 값에 따라 적용이 달라진다.

[margin: 0px; -> 값이 한 개 : '상하좌우'
margin: 0px 0px; ->값이 두 개 : '상하' '좌우'
margin: 0px 0px 0px; ->값이 세 개 : '상' '좌우' '하'
margin: 0px 0px 0px 0px; -> 값이 네 개 : '상' '우' '하' '좌' 시계방향으로 돈다.]

마진과 블록 레벨 요소 중앙 정렬

블록 레벨 요소의 좌우마진 값에 'auto'를 지정하면 중앙 정렬 할수 있다.




패딩(padding) 관련속성

• 속성 : padding-top, padding-right, padding-bottom, padding-left
• 값 : 길이, 퍼센트, auto, inherit
• 기본값 : 0
• 적용대상 : 모든 요소(테이블 관련 요소 중 셀 요소 이외 제외)

예) padding-top: 10px;

패딩값도 마진과 동일하게 일괄 지정 할수가 있다. 값은 공백문자로 구분하여 복수지정할 수 있고 지정하는 값에 따라 적용대상이 달라진다.

[padding: 0px; -> 값이 한 개 : '상하좌우'
padding: 0px 0px; ->값이 두 개 : '상하' '좌우'
padding: 0px 0px 0px; ->값이 세 개 : '상' '좌우' '하'
padding: 0px 0px 0px 0px; -> 값이 네 개 : '상' '우' '하' '좌' 시계방향으로 돈다.]