CSS Padding property

 

이미지 출처

https://codingeverybody.kr/css-margin-%EC%86%8D%EC%84%B1/

---

요소의 내부 공간을 결정하는 CSS 패딩(Padding) 속성에 대해 알아보겠습니다.

패딩은 테두리(Border)와 실제 콘텐츠(텍스트나 이미지) 사이의 안쪽 여백을 의미합니다.

---

1. 정의 및 특징

패딩은 요소의 내부 크기를 확장하는 역할을 합니다.

• 배경색의 영향: 요소에 배경색(background-color)이 지정되어 있다면, 패딩 영역까지 그 색이 채워집니다.
• 음수 값 불가: 마진(Margin)과 달리 패딩에는 음수 값을 사용할 수 없습니다.

---

2. 개별 속성과 축약형 (Shorthand)

상, 하, 좌, 우 방향을 개별적으로 설정하거나 한 줄로 줄여서 쓸 수 있습니다.

개별 속성

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

축약형 작성법

값을 적는 개수에 따라 시계 방향순으로 적용됩니다.

CSS

 

/* 1개: 상하좌우 모두 동일하게 20px */
padding: 20px;

/* 2개: 상하 / 좌우 (위아래 10px, 양옆 20px) */
padding: 10px 20px;

/* 3개: 상 / 좌우 / 하 (위 10px, 양옆 20px, 아래 30px) */
padding: 10px 20px 30px;

/* 4개: 상 / 우 / 하 / 좌 (시계 방향: 위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px) */
padding: 10px 20px 30px 40px;

---

3. 주의사항: 박스 크기 계산 (box-sizing)

기본적으로 패딩을 추가하면 요소의 전체 너비(width)가 커집니다.

예를 들어, 너비가 200px인 박스에 좌우 패딩을 각각 20px씩 주면 실제 화면에 보이는 너비는 240px이 됩니다.

이런 계산의 번거로움을 줄이기 위해 box-sizing: border-box; 속성을 사용하는 것이 권장됩니다.

이 속성을 쓰면 패딩을 아무리 줘도 처음 설정한 너비(200px) 안으로 패딩이 들어오게 됩니다.

---

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

패딩은 주로 버튼이나 박스 내부의 답답함을 해소하고 가독성을 높일 때 사용합니다.

HTML

 

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

---

📋 패딩 vs 마진 한눈에 비교

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

---

학습 정리

• 패딩은 요소 내부의 숨통을 트여주는 **"안쪽 여백"**입니다.
• 레이아웃이 깨지는 것을 방지하려면 항상 box-sizing: border-box; 설정을 생활화하는 것이 좋습니다.
• 인라인 요소(span 등)에 상하 패딩을 줄 경우, 배경은 칠해지지만 다른 줄의 텍스트를 밀어내지 못하므로 주의해야 합니다.

---

요소의 내부 공간을 디자인하는 패딩 속성을 정복하셨습니다!

---