부모 요소 패딩 값에 영향을 받지 않고 전체 너비 구분선 그리기

발생한 문제

Tailwind를 사용해 페이지 레이아웃을 구성하던 중 전체 레이아웃에 px-6이 적용되어 있었다.

 

이 안에서 <hr /> 나 <div>를 이용해 전체 너비로 구분선을 넣고 싶었지만,
양쪽에 패딩이 적용된 상태라 선이 양끝까지 닿지 않고 들여 쓰기 된 형태로 보였다.

 

 

원인 분석

Tailwind의 px-6은 padding-left와 padding-right에 각각 1.5 rem을 적용한다.
그 결과 내부에 들어간 모든 요소는 좌우로 1.5rem씩 들여 쓰기가 적용되며,
선도 그 안에 갇히게 되어 전체 너비로 그어지지 않게 된다.

 

즉, 상위 요소(container나 Layout)에 패딩 값이 적용되어 있으면, 자식 요소인 <hr>도 기본적으로 그 패딩 안에 갇히게 된다.

 

해결 방법 : -mx-6으로 padding 상쇄

이 문제는 구분선 요소에 -mx-6 (마이너스 마진)을 주는 것으로 간단히 해결할 수 있다.

-mx-6은 margin-left: -1.5rem, margin-right: -1.5 rem을 적용해
부모의 패딩을 무효화하고, 요소가 좌우 끝까지 확장되도록 만들어준다.

 

예시

- hr 태그로 구현할 경우

<hr className="border-t-2 border-gray-200 my-6 -mx-6" />

- div로 커스텀 선을 만들 경우

<div className="h-[2px] bg-gray-200 my-6 -mx-6" />

border-t-2 : 선의 두께, my-6 : 위아래 여백

 

요약 정리

px-6 레이아웃 안에서 <hr />가 들여쓰기되어 전체 너비로 안 보이는 경우

-> 구분선 요소에 -mx-6 추가로 패딩 상쇄

 

마무리

간단한 구분선 하나에도 Tailwind의 레이아웃 특성을 이해하지 못하면 UI가 깨질 수 있다.

특히 px-6, container, max-w-screen 등이 적용된 구조에서는 의도하지 않은 여백이 생길 수 있으므로,

상황에 따라 -mx로 유연하게 대응하는 습관이 중요하다.