패딩(Padding)

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

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

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

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

   CSS

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

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

   CSS

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

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

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

3. 단축 속성 사용:

   CSS

   Copy
   .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

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