Tailwind CSS에서 심 특정 요소의 내용과 테두리 사이의 공간입니다. 수평 패딩 요소의 왼쪽과 오른쪽에 있는 공간인 반면 세로 패딩 요소의 위쪽과 아래쪽에 있는 공간입니다. Tailwind는 원하는 요소에 수평 또는 수직 패딩을 추가하는 다양한 유틸리티 클래스를 제공합니다.
이 문서에서는 다음을 설명합니다.
Tailwind에서 수평 패딩을 추가하는 방법은 무엇입니까?
Tailwind에서 요소에 가로 패딩을 추가하려면 HTML 프로그램에서 원하는 요소와 함께 'px-
통사론
< 요소 수업 = 'px-0 ...' > ... 요소 >
여기서 'px'는 'x축' 또는 '가로 패딩'을 나타냅니다.
예: HTML 요소에 수평 패딩 적용
이 예에서는 ' px-20 ' 유틸리티 클래스 ' <사업부> ” 요소에 수평 패딩을 추가합니다.
< 몸 >
< 사업부 수업 = 'bg-핑크-600px-20 w-max' >
심 ~에 테일윈드 CSS
사업부 >
몸 >
산출
위의 출력은 컨테이너의 왼쪽과 오른쪽에 대한 패딩을 보여줍니다. 이것은 수평 패딩이 컨테이너 요소에 성공적으로 적용되었음을 나타냅니다.
Tailwind에서 수직 패딩을 추가하는 방법은 무엇입니까?
Tailwind에서 요소에 세로 패딩을 추가하려면 ' py-<값> ” HTML 프로그램의 특정 요소가 있는 유틸리티 클래스. 이 클래스는 y축을 따라 패딩을 추가합니다. 즉, 요소의 위쪽과 아래쪽 모두에 패딩을 추가합니다.
통사론
< 요소 수업 = '파이-0 ...' > ... 요소 >
여기서 'py'는 'y축' 또는 '수직 패딩'을 나타냅니다.
예: HTML 요소에 세로 패딩 적용
이 예에서는 ' 파이-20 ' 유틸리티 클래스 ' <사업부> ” 요소를 사용하여 세로 패딩을 추가합니다.
< 몸 >< 사업부 수업 = 'bg-핑크-600 py-20 w-맥스' >
심 ~에 테일윈드 CSS
사업부 >
몸 >
산출
위의 출력은 컨테이너의 위쪽과 아래쪽에 대한 패딩을 보여줍니다. 이는 세로 패딩이 컨테이너 요소에 효과적으로 적용되었음을 나타냅니다.
결론
Tailwind에서 가로 및 세로 패딩을 추가하려면 ' px-<값> ' 그리고 ' py-<값> ” 유틸리티 클래스는 각각 HTML 프로그램에서 원하는 요소와 함께 사용됩니다. 사용자는 다른 값을 지정하여 요소의 왼쪽과 오른쪽 또는 위쪽과 아래쪽에 패딩을 적용할 수 있습니다. 이 문서에서는 Tailwind에서 가로 및 세로 패딩을 적용하는 전체 방법을 설명했습니다.