CSS padding

이 요소의 내간격은 70px입니다.

CSS padding

CSS padding 속성은 정의된 경계 내에 있는 요소 내용 주위에 공간을 생성합니다.

CSS를 통해 내간격(채우기)을 완전히 제어할 수 있습니다. 각 측(위, 오른쪽, 아래, 왼쪽)에 내간격을 설정할 수 있는 몇 가지 속성이 있습니다.

Padding - 단일 경계

CSS는 요소의 각 측에 내간격을 지정하기 위한 속성을 가집니다:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

모든 내간격 속성은 다음 값을 설정할 수 있습니다:

  • length - px, pt, cm 등의 단위로 내간격을 지정
  • % - 포함 요소 너비의 백분율로 내간격을 지정
  • inherit - 부모 요소에서 내간격을 继承하는 지 지정

힌트:부정적인 값을 허용하지 않습니다.

예제

<div> 요소의 모든 네 가지 경계에 다른 내간격을 설정하십시오:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

개인적으로 시도해 보세요

Padding - 줄임말 속성

코드를 줄이기 위해 모든 내간격 속성을 하나의 속성에 지정할 수 있습니다.

padding 속성은 다음과 같은 각 내간격 속성의 요약 속성입니다:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

이와 같이 작동합니다:

padding: 25px 50px; padding 공식은 다음과 같습니다:

  • چهار 가지 값을 설정한 padding 요약 속성을 사용하여:
    • 속성이 세 가지 값을 설정하면:
    • 속성이 네 가지 값을 설정하면:
    • 위 내간격은 25px입니다
    • 오른쪽 내간격은 50px입니다

예제

왼쪽 내간격은 100px입니다

div {
  چهار 가지 값을 설정한 padding 요약 속성을 사용하여:
}

개인적으로 시도해 보세요

padding: 25px 50px; padding padding: 25px 50px 75px 100px;

  • 세 가지 값을 설정한 padding 요약 속성을 사용하여:
    • 속성이 세 가지 값을 설정하면:
    • 위와 아래 내간격은 25px입니다
    • 위 내간격은 25px입니다

예제

아래 내간격은 75px입니다

div {
  세 가지 값을 설정한 padding 요약 속성을 사용하여:
}

개인적으로 시도해 보세요

padding: 25px 50px; padding padding: 25px 50px 75px;

  • 두 가지 값을 설정한 padding 요약 속성을 사용하여:
    • 속성이 두 가지 값을 설정하면:
    • 위와 아래 내간격은 25px입니다

예제

오른쪽과 왼쪽 내간격은 50px입니다

div {
  두 가지 값을 설정한 padding 요약 속성을 사용하여:
}

개인적으로 시도해 보세요

padding: 25px 50px; padding 속성이 하나의 값을 설정하면:

  • padding: 25px;
    • 모든 네 가지 내간격은 25px입니다

예제

하나의 값을 설정한 padding 요약 속성을 사용하여:

div {
  padding: 25px;
}

개인적으로 시도해 보세요

내간격과 요소 너비

CSS width 속성은 요소 내용 영역의 너비를 지정합니다. 내용 영역은 요소(박스 모델)의 내간격, 테두리, 및 여유 공간 내에 있는 부분입니다.

따라서, 요소가 지정된 너비를 가지고 있다면, 요소에 추가된 내간격은 요소의 총 너비에 추가됩니다. 이는 일반적으로 원하지 않는 결과입니다.

예제

여기서, <div> 요소의 너비는 300px입니다. 하지만, <div> 요소의 실제 너비는 350px입니다(300px + 왼쪽 내간격 25px + 오른쪽 내간격 25px):

div {
  width: 300px;
  padding: 25px;
}

개인적으로 시도해 보세요

너비를 내간격无关하게 300px로 유지하려면, 다음과 같이 사용할 수 있습니다: box-sizing 속성. 이는 요소가 너비를 유지하게 합니다. 내간격을 늘리면 사용할 수 있는 내용 공간이 줄어듭니다.

예제

box-sizing 속성을 사용하여 내간격无关하게 너비를 300px로 유지합니다:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

개인적으로 시도해 보세요

더 많은 예제

왼쪽 내간격 설정
이 예제에서 <p> 요소의 왼쪽 내간격을 설정하는 방법을 보여줍니다.
오른쪽 내간격 설정
이 예제에서 <p> 요소의 오른쪽 내간격을 설정하는 방법을 보여줍니다.
위 내간격 설정
이 예제에서 <p> 요소의 위 내간격을 설정하는 방법을 보여줍니다.
아래 내간격 설정
이 예제에서 <p> 요소의 아래 내간격을 설정하는 방법을 보여줍니다.

모든 CSS 내간격 속성

속성 설명
padding 모든 내간격 속성을 한 줄의 선언에서 설정하는 요약 속성입니다.
padding-bottom 요소의 아래 내간격을 설정합니다.
padding-left 요소의 왼쪽 내간격을 설정합니다.
padding-right 요소의 오른쪽 내간격을 설정합니다.
padding-top 요소의 상단 내간격을 설정합니다.

확장 읽기

교과서:박스 모델: CSS 내간격