Box Model의 padding 속성

🟢   padding

콘텐츠(content)와 테두리(border) 사이의 안쪽 여백(inner space)으로, 요소의 내부 크기를 확장하는 속성.

• 배경색: 요소에 배경색(background-color)이 지정되어 있다면, 패딩 영역도 배경색이 칠해진다.
• 음수 값: 음수(-) 값을 사용할 수 없다.
• width/height와 합산될 수 있다.

 

🔹 box-sizing 속성

요소의 width와 height가 무엇을 포함하는지를 결정하는 속성.

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

• content-box: padding과 border는 width/height에 포함되지 않음. (content 크기만 포함) (기본값)

 

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

• border-box: padding과 border가 width/height에 포함.

 

📐 개별 속성

특정 방향에만 여백 조절 속성.

.box { padding-top: 10px; }
.box { padding-right: 20px; }
.box { padding-bottom: 30px; }
.box { padding-left: 40px; }

• padding-top: 위쪽 여백.
• padding-right: 오른쪽 여백.
• padding-bottom: 아래쪽 여백.
• padding-left: 왼쪽 여백.

 

🔨 축약형 속성 (Shorthand)

여백을 한 줄로 정의하는 속성.

.box { padding: 20px; } /* 1개: 상하좌우 모두 20px */
.box { padding: 10px 20px; } /* 2개: 상하 10px / 좌우 20px */
.box { padding: 10px 20px 30px; } /* 3개: 상 10px / 좌우 20px / 하 30px */
.box { padding: 10px 20px 30px 40px; } /* 4개: 상 10px / 우 20px / 하 30px / 좌 40px (시계 방향) */

 

 

📍  POINT 📍

✔️ Padding은 Content와 Border 사이의 공간을 만들어서 디자인 안정감과 가독성을 확보한다. ✔️

✔️ 레이아웃이 깨지는 것을 방지하려면 box-sizing: border-box; 속성을 사용한다. ✔️

✔️ 인라인 요소 (span 등)에 상하 Padding을 줄 경우, 배경은 칠해지지만 다른 줄의 텍스트를 밀어내지 못하므로 주의해야 한다. ✔️

 

 

📋 패딩 vs 마진 비교 📋

구분	패딩 (Padding)	마진 (Margin)
위치	테두리 안쪽 여백	테두리 바깥쪽 여백
배경색	배경색이 적용됨	배경색이 적용되지 않음 (투명)
음수 값	사용 불가	사용 가능
주 목적	콘텐츠와 테두리 사이 간격 확보	요소와 요소 사이의 간격 확보

 

---

 

⚙️ 실전 예제 코드: 버튼 스타일링 ⚙️

<style>
  .custom-button {
    background-color: #3498db;
    color: white;
    border: none;
    
    /* 패딩으로 버튼의 크기와 여백 조절 */
    padding: 12px 24px;
    
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
  }

  .custom-button:hover {
    background-color: #2980b9;
  }
</style>

<button class="custom-button">클릭하세요</button>