margin과 padding

margin과 padding 순서는 왜 쓸때마다 까먹는 것 같지..해서 기록

border를 기준으로 margin은 바깥쪽 여백, padding은 안쪽 여백을 지정한다.

margin과 padding의 사용은 간단하다.

기본이 되는 수치는 4개이다.

여백은 상하좌우 모두 조정이 가능하며 픽셀(px) 또는 %로 수치를 조절할 수 있다.

margin과 padding을 사용할 때 여백의 방향은 상 >> 우 >> 하 >> 좌 이다.

예를 들어 외부여백을 상 : 5, 우 : 2, 하 : 5, 좌 : 2만큼 주고 싶다면 아래와 같이 하면 된다.

☞ margin : 5px 2px 5px 2px; 

외부여백 상 : 5, 우 : 5만 주고 싶다면

☞ margin : 5px 5px; 

외부여백 상 : 15만 주고 싶을 때는 이렇게도 사용이 가능하다.(top, bottom, left, right를 지정할 수 있다.)

☞ margin-top : 15px;

내부여백을 지정하는 padding도 margin과 같이 사용법은 동일하다.

내부여백을 상 : 5, 우 : 2, 하 : 5, 좌 : 2만큼 주고 싶다면 동일하게 수치를 입력해주면 된다.

☞ padding : 5px 2px 5px 2px;

마찬가지로 top, bottom, left, right를 지정해 줄 수 있다.

내부여백 하 : 15를 줄 때

☞ padding-bottom : 15px;

참고로 margin: 0px auto; 는 가운데 정렬을 의미한다.