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

패딩(Padding)

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

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

padding은 margin과 달리 HTML 요소의 실제 크기에 영향을 줍니다. 즉, padding이 추가되면 HTML 요소의 전체 크기가 커질 수 있습니다.


사용법​

  1. 전체 여백 설정: 한 번에 모든 방향의 padding을 설정할 수 있습니다.

    CSS
    .box {
      padding: 20px; /* 모든 방향에 20px의 안쪽 여백 설정 */
    }

  1. 개별 방향 설정: 상, 우, 하, 좌 순서로 padding을 설정할 수 있습니다.

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

    위 코드는 다음과 같이 각 방향의 padding을 설정한 것과 동일합니다.

    • 10px : 상단 안쪽 여백
    • 15px : 우측 안쪽 여백
    • 20px : 하단 안쪽 여백
    • 25px : 좌측 안쪽 여백

  1. 단축 속성 사용:

    CSS
    .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로 유지됩니다.

    CSS
    .box {
      box-sizing: border-box;
    }

다음 내용이 궁금하다면?

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