padding 프로퍼티는?
테두리와 컨텐츠 사이에 있는 간격을 지정할때 사용하는 프로퍼티이다.
필자는 padding이 우리가 자주 사용하는 패딩옷과 이름이 같으니 아래와 같이 이해해 보았다.
사람이 패딩옷을 입었다.
여기서 사람은 컨텐츠이고 패딩옷의 겉부분(표면 부분)이 테두리이다.
패딩옷 안에 솜을 어느정도 넣어서 패딩옷을 부풀게 할지 정하는것이 padding프로퍼티이다.
padding 옵션
padding옵션은 1~4개를 지정할 수 있는데 1개일 경우 위,오른쪽,아래,왼쪽 전부 적용되므로 문제가 없는데 4~2개 일 경우 각 옵션수마다 적용순서가 다르므로 암기할 필요가 있다.
각 옵션마다 적용되는 순서는 아래와 같다.
4개일 경우
padding 50px 5px 5px 30px
4개일 경우 ↑ → ↓ ← 위 오른쪽 아래 왼쪽 상 우 하 좌 12시 3시 6시 9시
※12시 출근해서 9시 퇴근 한다고 생각하면 외우기 쉬울듯(유일한 시계방향)
3개일 경우
padding 50px 5px 30px
↑ ←→ ↓ 위 왼쪽오른쪽 아래 상 좌우 하 12시 9시3시 6시
2개일 경우
padding 50px 5px
↑↓ ←→ 위아래 왼쪽오른쪽 상하 좌우 12시6시 9시3시
이다.