[CSS] padding
2022. 9. 16. 15:14ㆍ프로그래밍/HTML & CSS
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;