Tailwind CSS에서는 ' 사이의 공간 ” 유틸리티는 플렉스 또는 그리드 컨테이너의 하위 요소 사이의 공간을 제어하는 데 사용됩니다. “space-x-
이 가이드에서는 Tailwind에서 음수 공백 값을 사용하는 방법을 예시합니다.
Tailwind에서 음수 공백 값을 사용하는 방법은 무엇입니까?
Tailwind에서 음수 공백 값을 사용하려면 먼저 HTML 구조를 만드세요. 그런 다음 대시 '를 사용하십시오. – ”를 원하는 유틸리티 클래스 “사이의 공백”으로 지정하여 음수 값으로 변환합니다. “ -space-x-<값> ' 그리고 ' -space-y-<값> ” 유틸리티는 한 요소를 다른 요소 안에 배치하는 데 자주 사용됩니다.
더 잘 이해하기 위해 아래 예를 살펴보겠습니다.
예 1: 요소 사이에 음수 수평 간격 적용
이 예에는 일부 하위 요소가 연속적으로 포함된 플렉스 컨테이너가 있습니다. 우리는 “ -공간-x-8 ” 클래스를 사용하여 플렉스 요소 사이에 음수 수평 간격을 적용합니다.
< 몸 >< div 수업 = 'flex -space-x-8 m-10 h-20 w-max' >
< div 수업 = 'bg-청록색-500 w-20 p-5 경계-2 경계-청록색-800' > 1 div >
< div 수업 = 'bg-청록색-500 w-20 p-5 경계-2 경계-청록색-800' > 2 div >
< div 수업 = 'bg-청록색-500 w-20 p-5 경계-2 경계-청록색-800' > 삼 div >
< div 수업 = 'bg-청록색-500 w-20 p-5 경계-2 경계-청록색-800' > 4 div >
< div 수업 = 'bg-청록색-500 w-20 p-5 경계-2 경계-청록색-800' > 5 div >
< div 수업 = 'bg-청록색-500 w-20 p-5 경계-2 경계-청록색-800' > 6 div >
div >
몸 >
여기, 상위
-
- “ 몸을 풀다 ” 클래스는 유연한 레이아웃을 생성합니다.
- “ -공간-x-8 ” 클래스는 컨테이너 내의 플렉스 요소 사이에 8단위의 음수 수평 간격을 추가합니다.
- “ m-10 ” 클래스는 컨테이너의 모든 측면에 10단위의 여백을 추가합니다.
- “ h-20 ” 클래스는 컨테이너의 높이를 20단위로 설정합니다.
- “ w-최대 ” 클래스는 컨테이너의 너비를 최대 콘텐츠 너비로 설정합니다.
하위
-
- “ bg-teal-500 ” 클래스는 플렉스 요소의 배경을 청록색으로 설정합니다.
- “ w-20 ” 클래스는 각 플렉스 항목의 너비를 20단위로 설정합니다.
- “ p-5 ” 클래스는 각 플렉스 아이템의 모든 측면에 5단위의 패딩을 추가합니다.
- “ 국경-2 ” 클래스는 컨테이너의 테두리 너비를 2단위로 설정합니다.
- “ 국경-청록색-800 ” 클래스는 테두리에 청록색을 적용합니다.
산출
위 출력은 플렉스 요소가 겹치는 것을 보여줍니다. 이는 음수 수평 간격 값이 성공적으로 적용되었음을 나타냅니다.
예 2: 요소 사이에 음수 수직 간격 적용
이 예에는 열에 일부 하위 요소가 있는 플렉스 컨테이너가 있습니다. 우리는 “ -space-y-7 ” 클래스를 사용하여 플렉스 요소 사이에 음의 수직 간격을 적용합니다.
< 몸 >< div 수업 = 'flex flex-col -space-y-7 m-10 텍스트 센터' >
< div 수업 = 'bg-청록-500 p-5 국경-2 국경-청록-800' > 1 div >
< div 수업 = 'bg-청록-500 p-5 국경-2 국경-청록-800' > 2 div >
< div 수업 = 'bg-청록-500 p-5 국경-2 국경-청록-800' > 삼 div >
< div 수업 = 'bg-청록-500 p-5 국경-2 국경-청록-800' > 4 div >
div >
몸 >
여기:
-
- “ 몸을 풀다 ” 클래스는 유연한 레이아웃을 생성합니다.
- “ 플렉스 콜 ” 클래스는 플렉스 아이템을 수직 방향으로 정렬합니다.
- “ -space-y-5 ” 클래스는 컨테이너 내의 플렉스 요소 사이에 7단위의 음수 수직 간격을 추가합니다.
- “ m-10 ” 클래스는 컨테이너의 모든 측면에 10단위의 여백을 추가합니다.
- “ 텍스트 센터 ” 클래스는 컨테이너의 텍스트를 중앙에 정렬합니다.
산출
플렉스 요소가 겹쳐져 있는 것을 볼 수 있습니다. 이는 음수 수직 공간 값이 성공적으로 적용되었음을 나타냅니다.
결론
Tailwind에서 음수 공백 값을 사용하려면 ' -space-x-<값> ' 그리고 ' -space-y-<값> ” HTML 구조에 원하는 플렉스 또는 그리드 컨테이너가 포함된 유틸리티입니다. 이러한 유틸리티는 한 요소를 다른 요소 안에 배치하는 데 자주 사용됩니다. 이 가이드에서는 Tailwind에서 음수 공백 값을 사용하는 방법을 예시했습니다.