CSS: margin, padding

허리케인 웬디
2016-08-01 18:00
마진은 외부 여백, 패딩은 내부 여백. 마진과 패딩 모두 순서는 공히 시계방향(상, 우, 하, 좌)이다.
margin: 1px 5px 1px 5px;
(외부 여백: 위 1px, 오른쪽 5px, 아래 1px, 왼쪽 5px)

근데 위아래가 같고, 좌우 값이 같으면 상하와 좌우를 묶어서 아래와 같이 표현할 수 있다.
padding: 1px 5px;
(내부 여백: 위아래 1px, 좌우 5px)

제일 헷갈릴 때가 숫자 세 개 써 있을 때인데. 상--좌우--하 순서이다.
padding: 1px 5px 0;
(내부 여백: 위 1px, 좌우 5px, 아래 0)

근데 순서도 헷갈리고 이도저도 다 귀찮다면 아예 표기를 해주는 방식도 있다.
margin-top: 1px;
margin-right: 2px:
margin-bottom: 3px;
margin-left: 4px;
(margin을 padding으로 바꾸면 내부 여백이 됨)