[Tailwind css] gap , space (feat. Flex)

둘 다 동작은 부모에서 선언하여 자식들의 간격을 유지시켜줌

• gap: Flexbox나 Grid 레이아웃에서 사용
• space: 일반적인 형제 요소들 사이의 간격을 조절할 때 사용

• 적용 방식:
  • gap: 부모 컨테이너에 직접 적용
  • space: 부모 컨테이너에 적용하며, 자식 요소들에 마진을 추가

.gap-x-2 {
  column-gap: 0.5rem /* 8px */;
}


.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem /* 8px */ * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem /* 8px */ * calc(1 - var(--tw-space-x-reverse)));
}

 

코드에서 보이듯이 space는 자식들에게 마진값을 줘서 일정 간격을 유지함.

*** 트러블슈팅: relative로 선언 된 부모(flex)에 space-x-2를 줘서 자식들에게 간격을 유지했고 그 안에 absolute 자식을 띄웠는데 이 absolute가 추가 되면 다른 static한 자식들의 위치가 변경되는 이슈가 있었음. gap-x-2를 사용했을 땐 absolute 자식은 다른 static 레이아웃에 영향을 안끼침 

해당 동작의 원인을 찾아보니 

 

• space-x는 마진을 사용하여 간격을 만듬
  • Flexbox 컨테이너 내의 absolute 위치 지정된 요소도 여전히 flex 아이템으로 취급
  • 이 요소는 레이아웃 흐름에서 제거되지만, 여전히 공간을 차지하여 space-x 영향을 받게 됨 
  • 따라서 static 한 자식들의 위치에도 영향을 끼침

• gap은 컨테이너 레벨에서 작동하며, 개별 아이템에 마진을 적용x 
  • gap은 레이아웃 흐름 내의 요소들 사이에만 적용됩니다. --> 레이아웃 요소가 아닌 absolute는 제외 돼서 원하던 동작이 됨