1. padding

---

• padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정한다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받으며, 패딩 영역의 크기를 방향별로 따로 설정할 수 있다.

2. padding 속성

---

1) padding-top

• 윗쪽의 패딩(padding) 값을 설정한다.

div {
    padding-top: 50px;
}

2) padding-right

• 오른쪽의 패딩(padding) 값을 설정한다.

div {
    padding-right: 50px;
}

3) padding-bottom

• 아래쪽의 패딩(padding) 값을 설정한다.

div {
    padding-bottom: 50px;
}

4) padding-left

• 왼쪽의 패딩(padding) 값을 설정한다.

div {
    padding-left: 50px;
}

3. padding 축약 표현

---

• 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있다. 4개의 padding 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
div.four {
    padding: 10px 20px 30px 40px;
}

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

• 3개의 padding 속성값을 가질 때는 top, right와 left, bottom 순으로 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
div.three {
    padding: 10px 20px 30px;
}

div.three {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 20px;
}

• 2개의 padding 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
div.two {
    padding: 10px 20px;
}

div.two {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

• 1개의 padding 속성값을 가질 때는 모든 패딩값을 같게 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
div.two {
    padding: 10px;
}

div.two {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}