CSS - margin, padding 지정하는 순서

각각 다 지정해주는 방법

margin-top: 10px;
margin-right: 20px;
margin-bottom: 15px;
margin-left: 5px;

아니면

margin: 10px 20px 15px 5px;

순서는 상우하좌 (top right bottom left) 입니다. 위에서부터 시계방향으로 돌아갑니다.

상하의 margin 이 같고, 좌우의 margin 이 같을 때

margin: 10px 5px;

좌우는 같은데, 상하가 다를 때

margin: 10px 5px 25px;

10px는 margin-top 의 값이고, 마지막에 나오는 25px는 margin-bottom이고 운데, 5px 가 좌우 margin 이다.

 

결론

정리하자면, margin/padding은 아래와 같은 순서로 사용할 수 있다.

margin: [margin-top][margin-right] [margin-bottom][margin-left];
margin: [margin-top][margin-left = margin-right] [margin-bottom];
margin: [margin-top=margin-bottom][margin-left = margin-right];
margin: [margin-top = margin-bottom = margin-left = margin-right];