CSS에서 패딩이란 무엇입니까?

CSS에서 패딩은 무엇을 위해 사용됩니까?

요소의 패딩 영역은 콘텐츠와 테두리 사이의 공간입니다. 패딩은 요소 내에 여분의 공간을 추가합니다. 반면 여백은 요소 주위에 여분의 공간을 추가합니다.

CSS에서 패딩으로 작업하는 방법

CSS 패딩 속성은 설정된 경계 내에 머무르면서 요소 콘텐츠 주변에 공간을 제공하는 데 사용됩니다.

기억하다:

여백이 요소 테두리 외부에 공간을 추가합니다

.

패딩은 요소 테두리 내부에 공간을 추가합니다

.

패딩 - 개별면

CSS를 사용하면 요소의 각 측면에 패딩을 지정할 수 있습니다.

패딩탑

오른쪽 패딩

패딩하단

패딩-왼쪽

예시:

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

패딩 – 속기 속성

코드를 단순화하기 위해 모든 패딩 속성을 단일 속성에 지정할 수 있습니다.

padding 속성은 아래에 나열된 개별 패딩 속성의 줄임말입니다.

패딩탑

오른쪽 패딩

패딩하단

패딩-왼쪽

작동 방식은 다음과 같습니다.
패딩 속성에 4개의 값이 있는 경우:
패딩: 50px 25px 50px 25px;

상단 패딩은 50px입니다

오른쪽 패딩이 25px임

하단 패딩은 50px입니다

왼쪽 패딩이 25px임

4가지 값

4개의 값을 사용하면 첫 번째는 위쪽에, 두 번째는 오른쪽에, 세 번째는 아래쪽에, 네 번째는 왼쪽에 적용됩니다.

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

3가지 값

3개의 값을 사용하면 첫 번째는 위쪽에, 두 번째는 왼쪽 및 오른쪽에, 세 번째는 아래쪽에 적용됩니다.

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

2 값

2개의 값을 사용하면 첫 번째 값은 bottom & top에 적용되고 두 번째 값은 left & right에 적용됩니다.

div {
  padding: 20px 10px;
}

1 값

단일 값을 사용하면 모든 패딩(위쪽, 오른쪽, 아래쪽, 왼쪽)에 적용됩니다.

div {
  padding: 25px;
}

허용되는 값

모든 패딩 속성에 다음 값을 할당할 수 있습니다.

length – 패딩을 px, pt, cm 등으로 정의합니다.
% – 패딩을 포함하는 요소 너비의 백분율로 지정합니다.
상속 – 패딩이 상위 요소에서 전달되어야 함을 나타냅니다.

추가 자료

이 주제에 대해 더 자세히 알고 싶습니까? 여기에서 자세히 알아볼 수 있습니다.
CSS Padding | MDN .

읽어 주셔서 감사합니다. 계속 코딩하세요.