padding, margin 한줄로 정의하기

padding은 테두리와 컨텐츠 사이의 여백,
margin은 테두리 바깥의 여백을 의미한다.

padding-left , padding-top 과 같이 상하좌우를 독립적으로 정의해줄 수 있지만 여러 속성을 한번에 정의할 수 있다.

매번 사용할 때마다 인터넷에 검색하게 되는 것 같아 정리를 해보았다.

1. 두가지 요소 🐠

padding: (상하) (좌우)
ex) padding: 1px 5px 
👉🏻 상하는 1px, 좌우는 5px로 설정

2. 세가지 요소 🐟

padding: (상) (좌우) (하)
ex) padding: 1px 3px 5px 
👉🏻 상 1px, 좌우 3px, 하 5px으로 설정

3. 네가지 요소 🐡

padding: (상) (우) (하) (좌)
ex) padding: 1px 3px 5px 7px 
👉🏻 상 1px, 우 3px, 하 5px, 좌 7px으로 설정 
👉 위쪽 방향부터 *시계방향*으로 돌아가며 설정

margin은 padding과 동일하게 적용된다.