margin과 padding이란? (margin, padding의 의미 및 속성)

최근 앱개발을 하면서 레이아웃을 많이 만져 이제는 익숙해졌지만 처음에는 헷갈리는 개념이었다.

 

margin과 padding은 대상 레이아웃에 공백을 만들어준다는 점에서 비슷하지만 조금 다른 부분이 있다.

 

먼저 두 개념에 대해 정리하자면 다음과 같다.

• margin : 바깥쪽 여백
• padding : 안쪽 여백

 

아래 사진을 보자.

굵은 선이 레이아웃의 크기 경계라고 할 때, 이 선을 기준으로 바깥쪽의 여백을 margin이라 하고 안쪽 여백을 padding이라 하는 것이다.

출처 : https://ofcourse.kr/images/attach/margin_padding.png

 

margin의 경우 왜 쓰는지 이해가 가는데 padding은 어떻게 사용해야하는지 감이 안올 수 있다.

필자 또한 그랬다..

 

padding의 경우 레이아웃의 위치(구조)에 영향을 주지않으면서 레이아웃 안의 내용물의 위치를 수정할 수 있는 좋은 방법이다.

 

예를들어 layout_weight 값으로 레이아웃끼리의 상대적인 비율이 정해져 있을 때 margin을 쓰면 전체 레이아웃의 비율이 망가질 수 있다.

이럴 때 padding을 사용하면 레이아웃의 위치나 상대적인 비율은 바뀌게 하지 않으면서 레이아웃 안의 내용물의 위치를 쉽게 조정할 수 있다.

 

아래는 티스토리 블로그를 꾸미다보니 웹의 경우 순서에 따라 상하좌우를 의미하는 게 달라서 그 순서를 정리해보았다

 

 

• margin: 10px 상하좌우에 모두 10px의 margin 부여
• margin: 10px 20px 상하 10px, 좌우 20px의 margin 부여
• margin: 10px 20px 30px 40px 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px의 margin 부여
• margin: 10px 20px 30px 위 10px, 좌우 20px, 아래 30px의 margin 부여

 

즉 시계방향으로 생각하면 된다.