Tailwind - 간격 조절, Sizing

 

Tailwind - 간격 조절, Sizing

#Web/CSS

패딩 설정(padding)

p 유틸리티 클래스를 사용하여 패딩을 설정할 수 있다.

<div class="p-4 bg-gray-100">
  이 박스는 모든 방향에 1rem 패딩이 있습니다.
</div>
<div class="px-6 py-2 bg-gray-200">
  이 박스는 좌우에 1.5rem, 상하에 0.5rem 패딩이 있습니다.
</div>

마진 설정(margin)

m 유틸리티 클래스를 사용하여 패딩과 유사한 방법으로 마진을 설정할 수 있다.

<div class="m-4 bg-blue-100">
  이 박스는 모든 방향에 1rem의 마진이 있습니다.
</div>
<div class="mt-6 mb-2 bg-blue-200">
  이 박스는 상단에 1.5rem, 하단에 0.5rem의 마진이 있습니다.
</div>

• mx-auto: 가로 중앙 정렬을 설정한다. margin-left와 margin-right를 자동으로 설정하여, 콘텐츠가 가운데로 배치된다.

요소 간의 공간 조정 (space-between)

요소 간의 간격을 조정할 때는 space-x(좌우) 또는 space-y(상하) 유틸리티를 사용한다.

<div class="flex space-x-4 bg-gray-300 p-4">
  <div class="bg-white p-4">첫 번째 박스</div>
  <div class="bg-white p-4">두 번째 박스</div>
  <div class="bg-white p-4">세 번째 박스</div>
</div>

폭(Width), 높이(Height)

요소의 폭을 결정할 때는 w 유틸리티 클래스를, 높이를 결정할 때는 h 유틸리티 클래스를 사용한다.

ex)

• w-0: width:0px
• w-px: width:1px
• w-1: width: 0.25rem
• w-3/5: width: 60%
• w-full: width: 100%
• w-screeen: width: 100vw;
• w-min: width: min-content;

Reference)
Tailwind CSS 공식 문서
짐코딩님 Tailwind CSS 완전 정복