div 요소의 line-height 상속 문제였습니다.
문제 상황
// 문제가 된 구조
- div는 부모로부터 line-height를 상속받음 (body의 기본값 또는 상위 컨테이너)
- div 내부에 inline 요소(span)가 있으면, div의 높이는 line-height에 의해 결정됨
- Typography C4는 font-size: 12px, line-height: 140% = 16.8px
- 하지만 div 자체의 line-height가 더 크면 추가 여백 발생
해결된 구조
// 해결 <Typography style={{ display: 'block', marginTop: 4 }}> {errorMessages.birth}
- div wrapper 제거 → line-height 상속 문제 없음
- Typography(span)에 display: block → 자체 line-height만 적용
- 불필요한 중첩 제거로 깔끔한 구조
CarrierInput과의 차이
CarrierInput은 을 사용해서 여백이 더 커서 line-height로 인한 추가 공간이 상대적으로 눈에 띄지 않았던 것입니다.