본문으로 건너뛰기
실습하기

패딩(Padding)

CSS에서 padding은 요소의 내부 여백을 의미합니다.

padding은 요소의 내용(텍스트, 이미지 등)과 그 요소의 경계(테두리) 사이의 여백을 만듭니다.

padding은 margin과 달리 HTML 요소의 실제 크기에 영향을 줍니다.

즉, padding이 추가되면 HTML 요소의 전체 크기가 커질 수 있습니다.


사용법​

padding은 다음과 같이 사용할 수 있습니다.


모든 방향의 동일한 패딩 설정​

padding 속성에 숫자 하나만 입력하면 모든 방향에 동일한 여백을 설정할 수 있습니다.

모든 방향 동일한 패딩 설정
.box {
  /* 모든 방향에 20px의 안쪽 여백 설정 */
  padding: 20px;
}

개별 방향 설정​

상, 우, 하, 좌 순서로 padding을 설정할 수 있습니다.

CSS
.box {
  /* 상, 우, 하, 좌 순서로 padding 설정 */
  padding: 10px 15px 20px 25px;
}

한 방향씩 패딩 설정​

padding-top, padding-right, padding-bottom, padding-left 속성을 사용하여 한 방향씩 패딩을 설정할 수 있습니다.

한 방향씩 패딩 설정
.box {
  padding-top: 10px; /* 상단 안쪽 여백 */
  padding-right: 15px; /* 우측 안쪽 여백 */
  padding-bottom: 20px; /* 하단 안쪽 여백 */
  padding-left: 25px; /* 좌측 안쪽 여백 */
}

주의사항​

padding은 요소의 전체 크기에 영향을 줍니다.

예를 들어, 가로세로 100px 크기의 상자에 padding: 10px을 10px 추가하면, 상자의 전체 크기는 120px x 120px로 증가합니다.

상하 좌우로 10px씩의 안쪽 여백이 추가되었기 때문입니다.

이러한 상황을 방지하려면 box-sizing: border-box;를 사용하여 padding이 요소의 전체 크기에 영향을 주지 않도록 설정할 수 있습니다.

위 예시에서 100px 크기의 상자에 box-sizing: border-box;를 CSS에 추가하면, 10px의 padding을 추가해도 상자의 전체 크기는 여전히 100px x 100px로 유지됩니다.

box-sizing 속성 사용 예시
.box {
  box-sizing: border-box;
}

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!