콘텐츠와 테두리 사이의 안쪽 공간을 조절합니다.
padding은 요소의 배경과 클릭 영역 안쪽에 포함됩니다. 상·우·하·좌 축약 순서를 사용하며 box-sizing에 따라 전체 크기 계산에 영향을 줍니다.
이번 예제의 출발점은 padding: 12px 20px;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 두 요소의 padding을 서로 바꾸고 높이와 클릭 영역을 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
고정 width에 큰 padding을 더하면 content-box에서 예상보다 요소가 넓어질 수 있습니다.
직접 바꿔보세요두 요소의 padding을 서로 바꾸고 높이와 클릭 영역을 비교하세요.