[CSS] padding

padding (내부 여백)

요소의 내부 여백(공간)을 지정하는 단축 속성이다.

여백이 생긴만큼 요소 자체의 크기가 커진다.

 

- 기본값: 0 (내부 여백 없음)

- 단위: px, em, vw 등 단위로 지정

- %: 부모 요소의 가로 너비에 대한 비율로 지정

 

단축 속성

단축 속성이란, 각 방향을 한 번에 적용해주는 단축키와 같은 속성을 말한다.

padding: 10px;

top, right, bottom, left : 10px

 

padding: 10px 20px;

top, bottom : 10px

left, right : 20px

 

padding: 10px 20px 30px;

top : 10px

left, right : 20px

bottom : 30px

 

padding: 10px 20px 30px 40px;

top : 10px

right : 20px

bottom : 30px

left : 40px

 

개별 속성

각 방향마다 하나씩 적용하는 속성을 말한다.

padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;