블로그 목록
frontend

CSS text-box-trim으로 글자 위아래 여백 잘라내기 — 아이콘과 텍스트가 안 맞을 때

버튼 안에 아이콘이랑 텍스트를 나란히 넣었는데 미묘하게 안 맞는다. align-items: center를 줬는데도 텍스트가 살짝 위로 뜬 것처럼 보인다. 개발자 도구로 글자 박스를 찍어보면 텍스트 위아래로 정체불명의 여백이 붙어 있다.

이게 폰트의 line-height가 만들어내는 half-leading이다. 글자의 실제 획은 대문자 높이(cap height)까지인데, 글꼴 박스는 그보다 위아래로 더 크다. 그래서 시각적 중심과 박스의 중심이 어긋난다. 지금까지는 이걸 line-height: 1로 줄이거나 margin을 음수로 밀어서 눈대중으로 맞췄다. 폰트를 바꾸면 또 틀어진다.

text-box-trim이 하는 일

text-box-trim은 이 위아래 여백을 아예 잘라내라고 브라우저에 지시하는 속성이다. 어디를 기준으로 자를지는 text-box-edge로 정한다.

.label {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
  • trim-both — 위아래 둘 다 자른다 (trim-start / trim-end도 있다).
  • text-box-edge: cap alphabetic — 위는 대문자 높이(cap)까지, 아래는 알파벳 베이스라인까지 남긴다.

두 속성을 한 줄로 쓰는 단축 속성도 있다.

.label {
  text-box: trim-both cap alphabetic;
}

실제로 붙여보기

아이콘 + 텍스트 버튼에 적용해보자.

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
}

.btn span {
  text-box: trim-both cap alphabetic;
}

text-box를 걸기 전에는 텍스트 박스의 여백 때문에 gap이나 padding이 실제 눈에 보이는 간격과 달랐다. 잘라내고 나면 대문자 윗변과 베이스라인이 박스 경계가 되니까, gap: 6px가 정말로 6px처럼 보인다. 제목의 위 여백을 없애서 카드 상단에 딱 붙이고 싶을 때도 trim-start만 주면 깔끔하다.

챙길 점

text-box-trim은 Chrome 133, Safari 18.2부터 지원한다(2025년에 Baseline 진입). 아직 안 되는 브라우저에서는 그냥 무시되고 기존처럼 여백이 남을 뿐, 레이아웃이 깨지진 않는다. 여백이 없는 상태를 전제로 margin을 다시 계산해뒀다면 구형 브라우저에서 살짝 어긋나 보일 수 있으니, 정렬이 핵심 기능인 곳에만 조심해서 쓰면 된다.

음수 마진으로 폰트마다 눈대중 보정하던 걸 한 줄로 대체할 수 있다는 게 제일 크다. 아이콘·텍스트 정렬, 제목 여백 제거처럼 "왜 1~2px이 안 맞지" 싶던 곳부터 넣어보면 효과가 바로 보인다.

목록으로 돌아가기