Tailwind CSS에서는 여유 특정 요소 주위의 간격을 제어하는 데 사용됩니다. 적용된 요소와 주변 요소 사이에 공간을 추가합니다. Tailwind CSS는 사용자가 원하는 요소 주변의 간격을 사용자 정의할 수 있는 여백 유틸리티 및 여백 값 세트를 제공합니다. 또한 사용자는 특정 요소의 위쪽, 아래쪽, 왼쪽 또는 오른쪽과 같은 한 면에 여백을 추가할 수 있습니다.
이 블로그는 Tailwind CSS에서 요소의 한 면에 여백을 추가하는 예를 보여줍니다.
Tailwind에서 한 면에 여백을 추가하는 방법은 무엇입니까?
Tailwind에서 요소의 한 면에 여백을 추가하려면 다음 유틸리티 클래스를 사용할 수 있습니다.
더 잘 이해하려면 아래 제공된 예를 살펴보십시오.
예제 1: 요소 상단에 여백 추가
이 예에서는 ' mt-14 ”의 유틸리티 클래스 <사업부> ” 요소를 사용하여 상단에 14단위의 여백을 추가합니다.
< 몸 >< 사업부 수업 = 'h-96 mt-14 bg-보라색-500' >
< 피 수업 = 'text-5xl 텍스트 센터' > 여유 ~에 테일윈드 CSS 피 >
사업부 >
몸 >
여기:
-
- “ h-96 ” 클래스는 컨테이너의 높이를 96 단위로 설정합니다.
- “ mt-14 ” 클래스는 컨테이너 상단에 14단위의 여백을 적용합니다.
- “ bg-퍼플-500 ” 클래스는 보라색을 컨테이너 배경으로 설정합니다.
산출
위의 출력은 마진이 컨테이너 상단에 추가되었음을 보여줍니다.예제 2: 요소 하단에 여백 추가
이 예에서는 ' MB-14 ”의 클래스 <사업부> ” 요소를 사용하여 아래쪽에 14단위의 여백을 추가합니다.
< 몸 >
< 사업부 수업 = 'h-96 mb-14 bg-퍼플-500' >
< 피 수업 = 'text-5xl 텍스트 센터' > 여유 ~에 테일윈드 CSS 피 >
사업부 >
몸 >
산출
컨테이너 하단에 여백이 추가된 것을 확인할 수 있습니다.예제 3: 요소 왼쪽에 여백 추가
이 예에서는 ' ml-14 ”의 클래스 <사업부> ” 요소를 왼쪽에 14단위의 여백을 추가합니다.
< 몸 >
< 사업부 수업 = 'h-96ml-14bg-퍼플-500' >
< 피 수업 = 'text-5xl 텍스트 센터' > 여유 ~에 테일윈드 CSS 피 >
사업부 >
몸 >
산출
위의 출력은 여백이 컨테이너 요소의 왼쪽에 추가되었음을 보여줍니다.예제 4: 요소 오른쪽에 여백 추가
이 예에서는 ' 미스터-14 ”의 클래스 <사업부> ” 요소를 추가하여 오른쪽에 14단위의 여백을 추가합니다.
< 몸 >
< 사업부 수업 = 'h-96 mr-14 bg-퍼플-500' >
< 피 수업 = 'text-5xl 텍스트 센터' > 여유 ~에 테일윈드 CSS 피 >
사업부 >
몸 >
산출
보시다시피 여백이 컨테이너 오른쪽에 효율적으로 추가되었습니다.결론
Tailwind에서 요소의 한 면에 여백을 추가하려면 '와 같은 다양한 유틸리티 클래스를 사용할 수 있습니다. ml-<값> ”, “ mr-<값> ”, “ mt-<값> ', 그리고 ' mb-<값> '. 이러한 클래스는 특정 요소의 왼쪽, 오른쪽, 위쪽 및 아래쪽에 각각 여백을 추가합니다. 사용자는 여백 크기에 대해 다른 값을 지정할 수 있습니다. 이 블로그는 Tailwind CSS에서 요소의 한 면에 여백을 추가하는 예제를 보여줍니다.
- “ h-96 ” 클래스는