안쪽 여백 padding

개념 이해하기

padding은 요소의 배경과 클릭 영역 안쪽에 포함됩니다. 상·우·하·좌 축약 순서를 사용하며 box-sizing에 따라 전체 크기 계산에 영향을 줍니다.

padding이 8px뿐인 대상 요소는 짙은 초록 배경이 글자에 바짝 붙은 얇은 띠로 보입니다. .second는 같은 규칙을 받은 뒤 padding을 30px로 덮어써 위아래로 22px씩, 모두 44px 더 높아지고 연한 배경도 그만큼 넓게 칠해집니다. 두 상자의 바깥 너비가 같은 것은 width가 auto라서 padding이 늘어난 만큼 콘텐츠 영역이 줄어들기 때문입니다.

padding에는 margin과 달리 음수를 쓸 수 없습니다. 또 span이나 a 같은 인라인 요소에 위아래 padding을 주면 배경은 커지지만 줄 높이는 그대로라 윗줄과 겹쳐 보일 수 있으므로, 링크의 클릭 영역을 키울 때는 display: inline-block으로 바꾼 뒤 padding을 줍니다.