CSS에서 여백에 관련된 속성은 두가지가 있는데 바로 마진(margin)과 패딩(padding)입니다. margin은 외부 여백의 크기를 정하고 padding은 안쪽 여백을 지정해 줍니다. 그럼 이제부터 자세히 알아보도록 하겠습니다.

1. 사용법

마진과 패딩은 "안쪽여백", "외부여백" 이라는 차이점이 있을 뿐 둘의 사용하는 방식은 같습니다. 단위는 일반적으로 px을 사용합니다.

margin-top:40px; /* 상단 40px 여백 */


margin-bottom:40px; /* 하단 40px 여백 */


margin-right:40px; /* 우측 40px 여백 */


margin-left:40px; /* 좌측 40px 여백 */

이런식으로 위치를 직접 지정해서 사용하거나 아래와 같이 수치만 입력해서 사용합니다.

margin:40px; /* 사방 40px 여백 */


margin:40px 50px; /* 상하 40px, 좌우 50px 여백 */


margin:20px 40px 30px; /* 상단 20px, 좌우 40px, 하단 30px 여백 */


margin:20px 50px 40px 30px; /* 상단 20px, 우측 50px, 하단 40px, 좌측 30px 여백 */

padding의 사용법은 margin에 패딩으로만 바꾸어 적으면 됩니다.

2. 비교

실제로 160X160px표를 가지고 비교 해보겠습니다. 아래의 그림에보면 여백에 색을 입혀놓았는데 여백에는 원래 색깔이 따로 없습니다. 여백에 색을 표시한것은 설명을 쉽게 하기위해서 입니다.



magin에 40px을 주게되면 위 그림과 같이 160X160픽셀 표주위에 파란색깔과 같이 표시된 40px의 외부 여백이 생기게 됩니다. 그래서 240X240px공간을 사용하게 됐습니다. 눈에보이는건 표뿐이므로 사용자는 160x160픽셀을 사용하는 것처럼 보입니다.



똑같이 padding에 40px을 주게되면 표크기가 160px + 80px이되고 표가 늘어난 만큼(위 그림에서 분홍색) 표 안쪽에 여백이 생기게 됩니다. 결국 차지하는 공간은 padding이나 magin이나 240X240px로 똑같아 집니다.



이번엔 두 속성을 같이 사용했을때의 모습니다. magin을 40px로 주고 padding을10px로 주게 되면 내부 여백이 10px이 되면서 표크기는 180*180px이 되고 외부여백 40px이 생기게 됩니다. 그리하여 260x260px을 차지하게 됩니다.

3. 정리

지금까지 padding과 magin의 사용법 및 차이점에 대해서 알아봤습니다. magin과 padding을 수월하게 다루게되면 css를 작성할때 많은 도움이됩니다. 10번보느니 한번해보는게 낫습니다. 한번 마진과 패딩을 사용해 보시길 바랍니다.

추가>padding을 사용할때는 유의해야할 점이있습니다. margin(외부여백)은 그냥 사용해도 레이아웃에는 별 지장을 안주지만 padding을 사용할 때는 표 크기를 생각해가며 값을 줘야 레이아웃에 이상이 없게 됩니다. 만약 표크기는 그대로 유지한채 padding(안쪽여백)을 5px만큼 주려면 표의 너비(width)와 높이(height)를 각각 5px만큼 줄여주세요.