박스 모델: CSS 내간격

요소의 내간격은 경계선과 내용영역 사이에 있습니다. 이 영역을 제어하는 가장 간단한 속성은 padding 속성입니다.

CSS padding 속성은 요소의 경계와 요소 내용 사이의 공백 영역을 정의합니다.

CSS padding 속성

CSS padding 속성은 요소의 내쪽 경계를 정의합니다. padding 속성은 길이 값을 또는 백분율 값을 받아들이지만, 음수 값을 사용할 수 없습니다.

예를 들어, 모든 h1 요소의 모든 측에 10 픽셀의 내쪽 경계를 원하면 다음과 같이 설정할 수 있습니다:

h1 {padding: 10px;}

상, 우, 하, 좌 순서로 각 측의 내쪽 경계를 각각 설정할 수 있으며, 각 측은 다른 단위나 백분율 값을 사용할 수 있습니다:

h1 {padding: 10px 0.25em 2ex 20%;}

아래의 네 가지 단일 속성을 사용하여 상, 우, 하, 좌 내쪽 경계를 각각 설정할 수 있습니다:

그렇게 생각해 보셨을 것입니다. 아래의 규칙은 위의 간략한 규칙과 완전히 동일한 효과를 가집니다:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

이전에 언급했듯이, 요소의 내쪽 경계에 백분율 값을 설정할 수 있습니다. 백분율 값은 부모 요소의 width에 비례합니다. 이는 외쪽 경계와 같습니다. 따라서 부모 요소의 width가 변경되면 그들도 변경됩니다.

아래의 규칙은 문단의 내쪽 경계를 부모 요소의 width의 10%로 설정합니다:

p {padding: 10%;}

예를 들어, 문단의 부모 요소가 div 요소라면, 그 내쪽 경계는 div의 width에 따라 계산됩니다.

<div style="width: 200px;">
<p>이 문장은 너비가 200 픽셀인 DIV 내에 포함된 문장입니다.</p>
</div>

주의:상하 내쪽 경계와 좌우 내쪽 경계가 일치합니다. 즉, 상하 내쪽 경계의 백분율은 부모 요소의 너비에 비례합니다. 높이에 비례하지 않습니다.

모든 내쪽 경계 속성이 하나의 선언문에 있습니다: 모든 내쪽 경계 속성을 하나의 선언문에 설정할 수 있는 간략한 속성을 사용하는 방법을 설명합니다. 한 가지에서 네 가지 값이 될 수 있습니다.
아래 내쪽 경계 1 설정: 이 예제에서는 셀의 아래 내쪽 경계를 센티미터 값으로 설정하는 방법을 설명합니다.
아래 내쪽 경계 2 설정: 이 예제에서는 셀의 아래 내쪽 경계를 백분율 비율로 설정하는 방법을 설명합니다.
왼쪽 내쪽 경계 1 설정: 이 예제에서는 셀의 왼쪽 내쪽 경계를 센티미터 값으로 설정하는 방법을 설명합니다.
왼쪽 내쪽 경계 2 설정: 이 예제에서는 셀의 왼쪽 내쪽 경계를 백분율 비율로 설정하는 방법을 설명합니다.
오른쪽 내간격 1 설정: 이 예제에서는 센티미터 값으로 셀의 오른쪽 내간격을 설정하는 방법을 보여줍니다.
오른쪽 내간격 2 설정: 이 예제에서는 퍼센트 값으로 셀의 오른쪽 내간격을 설정하는 방법을 보여줍니다.
상단 내간격 1 설정: 이 예제에서는 센티미터 값으로 셀의 상단 내간격을 설정하는 방법을 보여줍니다.
상단 내간격 2 설정: 이 예제에서는 퍼센트 값으로 셀의 상단 내간격을 설정하는 방법을 보여줍니다.

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