[CSS] Padding(패딩) 속성

CSS에서 padding속성은 정의된 테두리 내부의 요소 콘텐츠 주위에 공간을 생성하는데 사용합니다.

CSS를 사용하면 패딩을 완전히 제어할 수 있으며 요소의 각 측면(상단, 오른쪽, 하단 및 왼쪽)에 대한 패딩을설정하는 속성이 있습니다.

---

padding-top

padding-right

padding-bottom

padding-left

 

모든 속성 패딩은 아래와 같은 값을 가질 수 있다.

 

 1. 길이 - px, pt, cm 등의 패딩을 지정합니다.

 2. % - 포함하는 요소 너비의 패딩을 %로 지정합니다.

3. 상속 - 패딩이 상위 요소에서 상속되어야 함을 지정합니다.

---

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

테두리 내부의 요소 주위의 값을 위에 50px, 오른쪽 30px, 아래 50px, 왼쪽 80px 주었다. 페이지 검사를 눌러보면 값이 알맞게 들어가서

나오는걸 볼 수 있다.

---

각각 주는 방법이 있고 하나의 속성에 모든 패딩 속성을 지정할 수 있다.

속성에 4개의 값이 있는 경우

 

div {
  padding: 25px 50px 65px 80px;
}

---

3개의 값과 함께 패딩 속시 속성을 사용

(상단 패딩은 25px, 오른쪽 및 왼쪽 패딩은 50px 하단 패딩은 75px)

 

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

---

속성에 두 개의 값이 있는 경우

(상단 및 하단 패딩은 25px, 오른쪽 및 왼쪽 패딩은 50px)

 

div {
  padding: 25px 50px;
}

---

속성에 하나의 값만 있는 경우

(4개의 패딩은 모두 25px입니다.)

 

div {
  padding: 25px;
}