마진(margin)과 패딩(padding)의 차이점을 알아보자!!

<인터넷, 블로그팁: 마진(margin)과 패딩(padding)의 차이점이 뭘까?>

마진: 이윤, 이득
패딩: 두툼한 옷

위에 설명이 맞을까요? 맞습니다.
하지만 제가 설명하려는 단어는 같은 단어지만 다른 의미에 대해 얘기를 해보려 합니다.

마진(margin) VS 패딩(padding)

두 용어는 웹페이지에서 여백의 의미로 많이 사용되고 있습니다. 실제 블로그에서도 꼭 필요한 요소이구요.

마진: 여백, 여유
패딩: 속을 넣다, 채워 넣다

위의 의미로 다시 생각을 해보면 웹에서 사용되는 의미를 조금이나마 이해 할 수 있을 겁니다.

 

그림을 보면서 간단하게 설명을 드리면 기준점이 되는 border(테두리를 의미하며 보이지 않는 경우도 있음)의
내부 여백은 패딩, 외부 여백은 마진으로 나눌 수 있습니다.

margin, padding의 방향성

블로그 CSS를 살펴보면 종종 이런 수치들을 만나게 되는데요.

margin: 1 30px;
margin: 0 0 0 5px;
padding: 5px;
padding: 10 0 5px;

한번쯤 봤던 기억이 있으신가요?
어떤 것은 한개의 수치만 보이는 반면, 어떤 것은 4개가, 또 어떤 것은 두개, 세개 이렇게 제각각인데요.

기본이 되는 수치는 네개입니다.
margin: 0 0 0 5px;
이것을 풀어보면 외부여백: 상-0, 우-0, 하-0, 좌-5px로 해석이 되는데요.
4개의 수치는 위에서부터 시계방향으로 보시면 됩니다. 상->우->하->좌 이렇게 되는거죠.

그럼 나머지 1, 2, 3개의 수치로 나타난 것은 어떻게 해석을 하느냐..
좌우의 수치가 같을 때 마지막 좌측의 수치 생략: 즉, 상->우->하 이렇게 3개의 수치만 사용하구요.
상하, 좌우의 수치가 각각 같을 때 하, 좌 수치 생략: 즉, 상->우 이렇게 2개의 수치만 사용합니다.
마지막으로 모든 수치가 동일할 때 1개의 수치만 사용.

어때요? 이제 조금 이해가 되시나요?
좀더 예를 들어서 자세하게 설명을 해야되는데 준비가 좀 모자란 느낌이네요...
다음번에 추가포스팅을 통해서 좀더 자세한 설명을 드려보겠습니다.