CSS 패딩 속성을 사용하는 방법

CSS 패딩 사용 방법 알아보기 재산.

CSS padding 속성은 내부 공간의 양을 제어하는 데 사용됩니다. 콘텐츠와 테두리 사이의 HTML 요소.

padding 종종 CSS margin과 혼동됩니다. 외부 공간을 추가하는 속성 요소의 테두리(padding의 반대 ).

CSS 패딩 기본사항

다음은 텍스트 레이블(내용)이 있는 버튼 요소입니다.

<button>Button</button>

버튼에 패딩 값을 24px로 지정해 보겠습니다.

button { 
    padding: 24px;
}

결과:

패딩 값을 0으로 변경하면 당신은 이것을 얻습니다:

CSS에는 5가지 다른 패딩 속성이 있습니다.

padding-top
padding-right
padding-bottom
padding-left
padding (방금 사용한 것)

처음 4개의 패딩 속성(-top, -right, -bottom, -left)은 한쪽에만 패딩을 추가할 수 있는 개별적인 단일 방향 속성입니다.

마지막 padding , 이른바 속기 속성입니다. 5가지 패딩 속성 중 가장 유연하고 가장 많이 사용됩니다.

padding을 살펴보겠습니다. 재산을 조금 더.

패딩 속기 사용 방법

약식 padding 속성(지금까지 사용한 유일한 속성)은 동시에 여러 패딩 값(1, 2, 3 또는 4개의 값)을 추가할 수 있습니다.

몇 가지 예를 살펴보겠습니다.

하나의 값 패딩 속기

앞의 24px 패딩 버튼 예에서는 CSS에서 다음을 수행할 수 있었습니다.

button {
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
}

그러나 하나의 값을 사용하여 한 번에 4개의 면을 모두 타겟팅할 수 있는 것은 시간 낭비입니다. 패딩 속기:

button { 
    padding: 24px;
}

2개의 값 패딩 속기

위쪽과 아래쪽에 16px 패딩만 추가하고 왼쪽과 오른쪽에 24px 패딩을 추가하려면 어떻게 하시겠습니까?

다음과 같이 할 수 있습니다(시간이 많이 소요되는 방법):

button {
    padding-top: 16px; 
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px; 
}

또는 좋은 친구인 padding의 두 가지 값을 사용하세요. 약칭:

button {
    padding: 16px 24px;
}

padding을 사용하는 경우 2 속성 위와 같은 값:

첫 번째 값은 상단 및 하단 패딩을 모두 대상으로 합니다.
두 번째 값은 왼쪽 및 오른쪽 패딩을 모두 타겟팅합니다.

결과:

3개의 값 패딩 속기

padding을 사용하는 경우 3이 있는 속성 다음과 같은 값:

button {
    padding: 12px 24px 8px;
}

첫 번째 값은 상단 패딩입니다.
두 번째 값은 둘 다입니다. 왼쪽 및 오른쪽 패딩
세 번째 값은 하단 패딩입니다.

결과:

4개의 값 패딩 속기

padding을 사용하는 경우 4 속성 다음과 같은 값:

button {
    padding: 12px 16px 12px 16px;
}

첫 번째 값은 상단 패딩입니다.
두 번째 값은 오른쪽 패딩입니다.
세 번째 값은 하단 패딩입니다.
네 번째 값은 왼쪽 패딩입니다.

단방향 패딩 속성은 언제 사용하나요?

약식 padding 속성은 유연성과 효율성 측면에서 단일 방향 패딩 속성을 평가합니다.

예를 들어 다음을 사용하는 이유는 무엇입니까?

padding-left: 24px;

아래의 약어를 사용하여 동일한 결과를 얻을 수 있다면?

padding: 0 0 0 24px; /* top: 0, right: 0, bottom: 0, left: 24px */

어떤 이유로든 요소의 한 면에만 특정 패딩을 추가하고 다른 세 면의 패딩 값을 기본/현재 패딩 값으로 유지하려는 경우 단일 방향 패딩 속성을 사용하는 주된 이유는 설정).

그러나 요소의 왼쪽에만 패딩을 원하고 위쪽, 오른쪽, 아래쪽에는 0개의 패딩을 원한다고 가정해 보겠습니다. 단방향 패딩 속성을 사용하여 그렇게 하려면 상단, 오른쪽 및 하단의 기존 패딩 값이 재정의되도록 코드를 다음과 같이 작성해야 합니다.

padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 24px

이제 위의 코드는 약식 패딩 속성을 사용하여 한 줄에 작성할 수 있는 엄청난 양의 코드입니다.

padding: 0 0 0 24px; /* top, right, bottom, left */

내가 말하는 이 기본/현재 패딩 값은 무엇입니까?

다음에서 상속된 스타일을 언급하고 있습니다.

사용자 에이전트 스타일시트
CSS 라이브러리 또는 프레임워크
또는 CSS 스타일시트 상단에 직접 추가한 다른 스타일 선언(CSS 캐스케이드를 기억하십시오).

사용자 에이전트 스타일시트(UAS) 모든 브라우저에 내장된 최소 CSS 스타일시트입니다. 웹사이트에 CSS를 직접 추가하지 않더라도 최종 사용자가 콘텐츠를 읽을 수 있도록 충분한 스타일/서식을 유지하도록 하기 위한 것입니다.

예를 들어, 버튼 요소의 현재 패딩이 다음과 같은 경우(어디에서 왔는지에 관계없이)

button {
    padding-top: 16px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 16px
}

그리고 패딩 상단 값만 처리하는 버튼 클래스를 만듭니다.

.button-login {
    padding-top: 40px;
}

버튼 요소에 추가:

<button class="button-login">Login</Button>

그러면 로그인 버튼이 다음과 같이 표시됩니다.

다시 오른쪽, 아래쪽 및 왼쪽 패딩 값이 다른 곳에서 상속되기 때문입니다.

상상할 수 있듯이, 단일 방향 패딩 속성을 사용하면 특정 CSS 코드베이스가 얼마나 구성되어 있는지에 따라 혼란이나 예측할 수 없는 결과가 발생할 수 있습니다.

나 단일 방향 패딩 속성은 거의 사용하지 않습니다. 모든 새 프로젝트가 시작될 때 패딩 값을 0으로 재설정한 다음 프로젝트의 간격 배율에 따라 UI 구성 요소(HTML 요소)에 패딩 값을 추가하기 때문입니다.

이렇게 하면 X 브라우저의 사용자 에이전트 스타일시트에 의해 전달되는 다양한 스타일에 대해 걱정할 필요가 없기 때문에 내 워크플로를 더 예측할 수 있습니다.

위에서 언급한 모든 이유 때문에 약식 padding을 사용하는 것이 전반적으로 더 실용적입니다. 패딩 값을 정의하는 방법 — 대부분.

확실하지 않은 경우 패딩 속기를 사용하십시오.

패딩 속기를 기억하는 방법

값이 시계 방향으로 추가되기 때문에 4가지 값의 축약형이 기억하기 가장 쉽습니다. 위, 오른쪽, 아래, 왼쪽.

2 및 3 값 속기는 덜 명확합니다.

2가지 값 약식:16px 8px (상하, 좌-우)
3가지 값 약식:8px 16px 4px (상단, 좌-우, 하단)

참고: 실제로, 당신은 세 가지 값의 약칭을 사용할 필요가 거의 없을 것입니다. 나에게는 이것이 암기할 가치가 없습니다(당신의 두뇌 능력을 다른 것에 사용하십시오). 사용해야 하는 경우 찾아보세요.

허용되는 패딩 길이 단위

padding 속성은 모든 유형의 길이 단위를 허용합니다. 가장 일반적인 길이 단위는 px입니다. , rem , em , % , vw , vh , inherit .

참고: 픽셀 단위 px를 사용했습니다. 이 튜토리얼에서는 초보자(대부분의 사용자가 그렇다고 가정함)에게 더 친숙한 단위 유형이기 때문입니다. Illustrator, Sketch, Figma 등을 사용하는 시각적 디자인 배경에서 온 경우 특히 그렇습니다.

그러나 픽셀은 절대 단위입니다. 길이가 고정되어 잘 확장되지 않습니다.

앞서 언급한 rem과 같은 상대 단위 , em , % , vw , vh , 확장에 탁월하지만 각각 다른 방식으로 진행합니다.

나 주로 rem 사용 내 패딩 값에 대한 것이지만 이것은 모든 최신 브라우저가 모든 단위 유형을 처리할 수 있는 오늘날과 같은 시대에 주로 선호도의 문제입니다.

성능 최적화(선택적 읽기)

성능 최적화에 대한 배경지식을 갖고 계신 분들을 위해 저는 여러분이 무슨 생각을 하는지 알고 있습니다.

"단일 방향 값을 사용하는 것과 대조적으로 패딩 속기를 사용할 때의 성능 차이/비용이 있습니까?"

대답은 예입니다. 그러나 다음 두 예 중 어느 것이 전반적으로 가장 성능이 좋은지 예측하는 것은 거의 불가능합니다.

padding: 8px 12px 16px 20px;

padding-top: 8px;
padding-right: 12px;
padding-bottom: 16px;
padding-left: 20px;

속기는 처리할 바이트(데이터)가 적기 때문에 가장 성능이 뛰어난 옵션이라고 생각할 수 있습니다.

그러나 이는 모두 코드 처리(파싱, 축소, 컴파일) 측면에서 개발과 프로덕션 사이에 발생하는 일과 프로젝트 구성 및 구성 방식에 따라 다릅니다.

잠재적인 차이는 너무 미미하여 걱정할 가치가 없습니다. 전투를 현명하게 선택해야 하며 성능과 관련하여 패딩 속성보다 훨씬 더 큰 물고기를 튀길 수 있습니다.