초보자를 위한 Tailwind CSS: 여백 및 패딩
간격
Tailwind 간격 유틸리티는 요소 사이에 지정된 공간을 허용합니다. 공간은 요소 테두리 외부(여백) 또는 요소 테두리 내부(패딩)일 수 있습니다.
여백과 패딩의 차이를 확인하는 상자를 살펴보십시오.
여백
요소 주변(모든 면)에 여백을 설정하려면 여백 유틸리티를 사용해야 합니다. 구문은 m-{숫자}입니다. 지정된 숫자는 측정 단위가 아닙니다. 여백 공간을 참조하는 Tailwind CSS 번호만 해당됩니다. 숫자가 클수록 공간이 커집니다. 다음은 몇 가지 예입니다.
<div class="m-0"> margin: 0px;
<div class="m-1"> margin: 0.25rem;
<div class="m-4"> margin: 1rem;
<div class="m-96"> margin: 24rem;
한쪽에만 여백이 필요한 경우. 여백을 적용할 면(위, 오른쪽, 아래, 왼쪽)을 지정해야 합니다.
구문은 m{side}-{number}입니다. Side는 t(위쪽), r(오른쪽), b(아래쪽), l(왼쪽)으로 바꿀 수 있습니다.
다음은 몇 가지 예입니다.
<div class="mt-10"> margin-top: 0px;
<div class="ml-1"> margin-left: 0.25rem;
<div class="mb-4"> margin-bottom: 1rem;
<div class="mr-96"> margin-right: 24rem;
우리 자신이 볼 수 있는 예를 들어 봅시다:
<h1>Welcome to this page</h1>
<p>In this page we will learn Tailwind CSS spacing utilities</p>
기본 속성 없이 Tailwind HTML 태그를 사용합니다. h1 텍스트는 p 텍스트와 동일하게 보이며 간격이 전혀 없습니다.
첫 번째 Tailwind 마진 유틸리티를 추가해 보겠습니다.
<h1 class="mt-10 ml-10">Welcome to this page</h1>
<p class="mt-5 ml-10">In this page we will learn Tailwind CSS spacing utilities</p>
여백 x 및 y
Tailwind는 하나의 짧은 구문 m{axis}-10으로 x축 여백과 y축 여백을 모두 수정할 수 있습니다.
예를 들어 왼쪽, 오른쪽 및 위쪽, 아래쪽을 변경하려면 다음과 같이 하십시오.
<div class="ml-10 mr-10">
<div class="mt-10 mb-10">
same as
<div class="mx-10">
<div class="my-10">
패딩
패딩 유틸리티는 여백과 동일한 구문으로 정확히 동일한 방식으로 작동합니다. m{side}-{number}를 p{side}-{number}로 바꾸십시오.
패딩은 요소 테두리 내부의 공간임을 기억하십시오. 여기에 예가 있습니다. 명확성을 위해 html 요소에 테두리를 표시합니다.
<h1 class="border-2 mt-10 ml-10">Welcome to this page</h1>
<p class="border-2 mt-5 ml-10">In this page we will learn Tailwind CSS spacing utilities</p>
요소 사이에 공백이 없으며 테두리입니다.
패딩으로 변경해 보겠습니다.
<h1 class="p-5 mt-10 ml-10 border-2">Welcome to this page</h1>
<p class="p-5 mt-5 ml-10 border-2">In this page we will learn Tailwind CSS spacing utilities</p>
훨씬 낫다 :-)
결론
오늘은 여기까지입니다. 내일도 여행은 계속됩니다! 채널을 유지하고 아무것도 놓치지 않도록 나를 따르십시오.
Twitter에서 나를 팔로우할 수 있습니다.
Reference
이 문제에 관하여(초보자를 위한 Tailwind CSS: 여백 및 패딩), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ericchapman/tailwind-css-for-dummies-margins-and-paddings-4644텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)