padding
영역 안쪽에 여백을 넣을 때 사용한다.
상하좌우 한 번에
padding: 8px;
상하, 좌우 각각
padding: 16px 8px;상, 좌우, 하
padding: 16px 8px 24px;숫자의 순서는 시계 방향으로 0시 -> 3시 -> 6시 순서로 외우면 된다.
상, 우, 하, 좌
padding: 16px 8px 24px 10px;숫자의 순서는 시계 방향으로 0시 -> 3시 -> 6시 -> 9시 순서로 외우면 된다.
padding - 속성
패딩 값을 각각 주고 싶을 때 쓰는 속성들이다. 앞에서 상, 우, 하, 좌 값을 따로 썼던 걸 속성으로 나눈 것이라고 생각하면 된다.
padding: 16px 8px 24px 10px;padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;
Margin
영역 바깥쪽 여백을 넣을 때 사용했다. 특히 좌우 바깥 여백의 경우에는 auto라는 걸 사용해서 자동으로 채울 수 있다. 여기서 주의할 점은 요소의 width 속성이 정해져 있어야 자동으로 채울 수 있다.
상하좌우
margin: 8px;상하, 좌우
margin: 16px 8px;자동으로 채우기
width: 520px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있음 */
margin: 16px auto;상, 좌우, 하
margin: 16px 8px 24px;순서는 마찬가지로 시계 방향으로 외운다.
상, 우, 하, 좌
margin: 16px 8px 24px 10px;순서는 마찬가지로 시계 방향으로 외운다.
margin - 속성
padding 이랑 마찬가지로 값을 각각 주고 싶을 때 쓰는 속성들이다.
margin: 16px 8px 24px 10px;margin-top: 16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;