by Jeoney Kim

HTML+CSS padding과 margin의 차이
2017년 11월 4일에 업데이트됨

by Jeoney Kim

padding과 margin의 차이 padding과 margin을 구별하는 방법

padding과 margin의 공통점은 모두 여백을 줄 때 사용됩니다.
즉, 태그 요소에 비어있는 공간을 넣어줄 때 많이 사용하게 됩니다.


위 그림은 CSS Box Model의 단면도 입니다.
그림을 잘 살펴보시면


margin은 border를 기준으로 바깥쪽에 위치해 있고


padding은 border를 기준으로 안쪽에 위치해 있습니다.


border는 박스에서 경계면을 뜻하기도 합니다.
정리하자면 여백의 위치가 경계면의 안쪽에 있는지
또는 경계면의 바깥쪽에 있는지에 따라
padding과 margin으로 구분합니다.


박스에 배경색을 넣었을 때
padding과 margin을 비교해보면


경계면 안쪽에 위치한 padding은
콘텐츠에 포함되는 부분이므로
위 그림과 같이 파랑색 배경이 나오게 됩니다.

반면, 경계면 바깥쪽에 위치한 margin은
콘텐츠에 포함되지 않는 부분이므로
파랑색 배경이 나오지 않게 됩니다.
따라서 콘텐츠를 제외한 나머지 영역 모두를
margin 영역이라고 보시면 됩니다.

코딩할 때 쓰임새

그럼 이제 실제 코딩할 때 padding과 margin의 쓰임새를 알아봅시다!


ul, li, a를 이용하여 위와 같은 세로메뉴를 만들었습니다.
그런데 각 메뉴가 너무 붙어있어서 3개의 버튼 구분이 잘 안됩니다.
그래서 margin을 이용해서 각 버튼이 구분되게 만들어 보겠습니다.



.menu li   {
margin:   20px 0;
}


결과가 위와 같이 바뀌었습니다.
버튼이 상하단으로만 떨어지면 되는 구조이기 때문에
상하단만 20px을 지정하니 자연스럽게 버튼이 구분됩니다.

좌우는 노란색 부분이 좀 여유가 있는데 비해
상하는 노란색 부분이 좀 답답해 보입니다.
이번엔 버튼 안쪽 상하단 부분을 조금 넓혀 보겠습니다.


.menu li a   {
padding:   20px 0;
}


결과가 위와 같이 바뀌었습니다.
버튼 안쪽 노란색 부분 상하단이 넓어진 거 보이시죠?

padding과 margin을 사용하기 전에 콘텐츠 영역에 포함되는 부분인지 포함되지 않는 부분인지 먼저 생각해봅시다!