[html] Margin 과 Padding 차이점과 사용법

안녕하세요, 우리노트의 Benjamin Song입니다.

블로그를 꾸미다 보니 자연스럽게 HTML 학습을 동시에 하는것 같습니다.

오늘은 여백값을 설정할때 사용하는 Margin 과 Padding 에 대하여 알아보겠습니다.

사실 저도 Margin 값을 주었다가 Padding 값을 주었다가 직접 비교해보면서 시간낭비하는 경우가 많습니다. 두가지 여백값 사용은 헤깔리는 경우가 종종 있는데요, 이 포스팅 이후로는 개념이 잘 잡히기를 기대해봅니다.

Margin VS Padding

쉽게 설명하자면 Margin은 외부 여백 Padding은 내부여백정도로 생각하시면 됩니다.

그림을 보면서 쉽게 이해해 보도록 하겠습니다.

1. Margin 값으로 좌측 여백을 준경우

2. Padding 값으로 좌측 여백을 준 경우

두경우 모두 텍스트의 위치는 좌측에 여백을 두고 동일하게 나타나지만 내부적으로는 다른 코딩 절차를 거치게 됩니다.

Margin 과 Padding 설정법

Margin 이나 Padding 모두 설정값을 줄때 top, bottom, right, left 를 일일히 지정해주는 경우도 있지만 생략하는 경우도 있습니다. 이 경우 뒤에 오는 변수의 개수에 따라 의미하는 여백값이 달라집니다.

margin[padding] 10px;                   

  --> 상하좌우 모두 10px의 여백값을 가집니다.

margin[padding] 10px 0px;                 

  --> 상하는 10px의 여백값을 갖고 좌우는 여백이 없습니다.

margin[padding] 10px 0px 20px;         

  --> 상은 10px 하는 20px 의 여백값을 갖고 좌우는 여백이 없습니다.

margin[padding] 10px 0px 20px 15px; 

  --> 앞에서부터 상 우 하 좌 의 여백값을 나타냅니다. 

        위 경우 상부터 시계방향으로 생각하시면 간단합니다.

ex) Margin 10 0 50 30

누군가에게 유용한 정보가 되었기를 기대하며 Margin 과 Padding 차이점과 사용법에 대한 글을 마칩니다.