Tailwind CSS는 사용자 지정 가능하고 반응이 빠른 웹 페이지 또는 디자인을 만드는 데 사용되는 잘 알려진 프레임워크입니다. 또한 사용자가 맞춤 CSS를 작성하지 않고도 요소의 레이아웃과 간격을 제어할 수 있습니다. 패딩은 특정 요소의 내용과 테두리 사이의 공간입니다. 때때로 사용자는 요소의 모든 측면에 동일한 양의 패딩을 적용하기를 원합니다. Tailwind는 요소의 모든 측면 또는 특정 측면(예: 위쪽, 오른쪽, 아래쪽 또는 왼쪽)에 패딩을 적용하는 유틸리티 클래스를 제공합니다.
이 문서에서는 Tailwind에서 요소의 모든 면에 패딩을 추가하는 방법을 예시합니다.
Tailwind에서 모든 면에 패딩을 추가하는 방법은 무엇입니까?
Tailwind에서 특정 요소의 모든 면에 패딩을 추가하려면 HTML 구조를 만드세요. 그런 다음 특정 요소와 함께 'p-
통사론
< 요소 수업 = 'p-<값>' ... 요소 >
'
예
이 예에서는 두 개의 ' <사업부> ” 요소와 두 가지 다른 패딩을 적용합니다. p-8 ' 그리고 ' p-14 ” 그들에:
< 몸 >
< 사업부 수업 = 'bg-핑크-600 p-8 w-맥스' >
심 ~에 테일윈드 CSS
사업부 >
< br >
< 사업부 수업 = 'bg-teal-600 p-14 w-max' >
심 ~에 테일윈드 CSS
사업부 >
몸 >
여기 첫 번째
-
- “ bg-핑크-600 ” 클래스는 요소의 배경색을 분홍색으로 설정합니다.
- “ p-8 ” 클래스는 컨테이너의 모든 면에 8단위의 패딩을 추가합니다.
- “ w-최대 ” 클래스는
요소의 너비를 최대 콘텐츠 너비로 설정합니다.두 번째
에서:-
- “ bg-청록-600 ” 클래스는 청록색을 요소의 배경색으로 설정합니다.
- “ p-14 ” 클래스는 컨테이너의 모든 면에 14단위의 패딩을 적용합니다.
- “ w-최대 ” 클래스는
요소의 너비를 최대 콘텐츠 너비로 설정합니다.산출
위의 출력에 따르면 지정된 패딩이 두 컨테이너의 모든 면에 적용되었습니다.결론
Tailwind에서 요소의 모든 면에 여백을 추가하려면 HTML 프로그램에서 원하는 요소와 함께 'p-
' 유틸리티 클래스를 사용합니다. 패딩을 요소에 적용하려면 사용자가 특정 값을 지정해야 합니다. 확인을 위해 HTML 웹 페이지를 확인하고 변경 사항을 확인하십시오. 이 문서에서는 Tailwind에서 요소의 모든 면에 패딩을 추가하는 방법을 예시했습니다.
- “ bg-청록-600 ” 클래스는 청록색을
- “ bg-핑크-600 ” 클래스는