초보자를 위한 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에서 나를 팔로우할 수 있습니다.