• CSS Padding

패딩은 정의된 어떤 테두리 안에서 한 요소의 콘텐츠 주위에 공간을 만드는데 사용됩니다.

CSS로 패딩을 완전히 조절할 수 있습니다. 한 요소의 각각의 측면 (상단, 우측, 하단, 좌측)에 대한 패딩을 설정하는 속성들이 있습니다.

CSS에는 한 요소의 각각의 측면에 대한 패딩을 지정하는 속성들이 있습니다.

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

모든 패딩 속성들은 하기의 값을 가질 수 있습니다.

• length - px, pt, cm 등의 단위로 패딩을 지정합니다.
• % - 포함하고 있는 요소의 너비의 백분율로 패딩을 지정합니다.
• inherit - 부모 요소에서 상속받는 패딩을 지정합니다.
  • Note : 음수는 허용되지 않습니다.

<div> 요소의 모든 4개 측면에 대한 다른 패딩을 설정합니다.

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

코드를 줄이기 위해, 하나의 속속에서 모든 패딩 속성들을 지정하는 것이 가능합니다.
padding속성은 하기의 패딩 속성들 각각에 대한 shorthand 속성입니다.

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

작동 원리는 하기와 같습니다.

• 패딩 속성이 4개의 값을 갖는 경우

• top padding: 25px
• right padding: 50px
• bottom padding: 75px
• left padding: 100px

4개의 값을 가지는 shorthand 속성을 사용합니다.

div {
  padding: 25px 50px 75px 100px;
}

• 패딩 속성이 3개의 값을 갖는 경우

• top padding: 25px
• right and left padding: 50px
• bottom padding: 75px

3개의 값을 가지는 shorthand 속성을 사용합니다.

div {
  padding: 25px 50px 75px;
}

• 패딩 속성이 2개의 값을 갖는 경우

• top and bottom padding: 25px
• right and left padding: 50px

2개의 값을 가지는 shorthand 속성을 사용합니다.

div {
  padding: 25px 50px;
}

• 패딩 속성이 1개의 값을 갖는 경우

• 모든 4개의 padding: 25px

1개의 값을 가지는 shorthand 속성을 사용합니다.

div {
  padding: 25px;
}

CSS width 속성은 요소의 콘텐츠 영역 너비를 지정합니다. 콘텐츠 영역은 패딩(padding), 테두리(border) 그리고 여백(margin) 내부의 부분입니다.

그래서 한 요소가 지정된 너비를 가지는 경우, 그 요소에 추가되는 패딩은 해당 요소의 총 너비에 추가됩니다. 이것은 종종 바람직하지 않는 결과입니다.

<div> 요소에 300px의 너비가 주어집니다. 하지만 <div> 요소의 실제 너비는 350px (300px + 좌측 패딩 25px + 우측 패딩 25px)입니다.

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

패딩의 합계에 상관없이 너비 300px을 유지하기 위해, box-sizing속성을 사용할 수 있습니다.
이 box-sizing속성은 해당 요소가 너비를 유지하게 합니다; 패딩 간격을 늘리는 경우, 이용할 수 있는 콘텐츠 공간은 감소합니다.

패딩 간격 합계에 상관없이 너비 300px을 유지하기 위해, box-sizing속성을 사용합니다.

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;  // 제일 중요합니다.
}