Tailwind CSS에서 패딩은 특정 요소의 콘텐츠와 테두리 사이에 공간을 추가하는 데 사용됩니다. 요소 내부에 여분의 간격을 추가합니다. Tailwind CSS는 사용자가 원하는 요소의 간격을 사용자 지정할 수 있는 패딩 유틸리티 및 패딩 값 세트를 제공합니다. 또한 사용자는 특정 요소의 위쪽, 아래쪽, 왼쪽 또는 오른쪽과 같은 한쪽 면에 패딩을 추가할 수 있습니다.
이 블로그는 Tailwind CSS에서 요소의 한 면에 패딩을 추가하는 예제를 보여줍니다.
Tailwind에서 한쪽 면에 패딩을 추가하는 방법은 무엇입니까?
Tailwind에서 요소의 한 면에 패딩을 추가하려면 다음 유틸리티 클래스를 사용할 수 있습니다.
더 잘 이해하려면 아래 제공된 예를 확인하십시오.
예제 1: 요소 상단에 패딩 추가
이 예에서는 ' pt-10 ”의 유틸리티 클래스 <사업부> ” 요소를 사용하여 상단에 패딩 10단위를 추가합니다.
< 몸 >< 사업부 수업 = 'bg-핑크-600 pt-10 w-max' >
심 ~에 테일윈드 CSS
사업부 >
몸 >
산출
위의 출력은 패딩이 컨테이너 상단에 추가되었음을 보여줍니다.
예제 2: 요소 하단에 패딩 추가
이 예에서는 ' pb-10 ”의 클래스 <사업부> ” 요소를 사용하여 아래쪽에 패딩 10단위를 추가합니다.
< 몸 >< 사업부 수업 = 'bg-pink-600 pb-10 w-max' >
심 ~에 테일윈드 CSS
사업부 >
몸 >
산출
컨테이너 바닥에 패딩이 추가된 것을 볼 수 있습니다.
예제 3: 요소 오른쪽에 패딩 추가
이 예에서는 ' pr-10 ”의 클래스 <사업부> ” 요소를 오른쪽에 10단위의 패딩을 추가합니다.
< 몸 >< 사업부 수업 = 'bg-핑크-600 pr-10 w-맥스' >
심 ~에 테일윈드 CSS
사업부 >
몸 >
산출
위의 출력은 패딩이 컨테이너 요소의 오른쪽에 추가되었음을 보여줍니다.
예제 4: 요소 왼쪽에 패딩 추가
이 예에서는 ' PL-10 ”의 클래스 <사업부> ” 요소를 왼쪽에 10단위의 패딩을 추가합니다.
< 몸 >< 사업부 수업 = 'bg-핑크-600 pl-10 w-맥스' >
심 ~에 테일윈드 CSS
사업부 >
몸 >
산출
컨테이너의 왼쪽에 패딩이 추가된 것을 볼 수 있습니다.
결론
Tailwind에서 요소의 한 면에 여백을 추가하려면 다음과 같은 다양한 유틸리티 클래스를 사용할 수 있습니다. pl-<값> ”, “ pr-<값> ”, “ pt-<값> ', 그리고 ' pb-<값> '. 이 클래스는 특정 요소의 왼쪽, 오른쪽, 위쪽 및 아래쪽에 각각 패딩을 추가합니다. 사용자는 패딩 크기에 대해 다른 값을 지정할 수 있습니다. 이 블로그는 Tailwind CSS에서 요소의 한 면에 패딩을 추가하는 예제를 보여줍니다.