[CSS] 왜 <span>은 수직 중앙 정렬이 안 맞고, <img>는 맞을까?

UI 작업하다 보면 이런 경험 있으실 거예요.
텍스트 옆에 작은 뱃지나 아이콘을 붙이고 싶은데, <span>으로 만들면 수직 중앙이 애매하게 어긋납니다.

<strong>타이틀 영역입니다 <span>뱃지</span></strong>

strong {
    display: inline-block;
    color: #131518;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
    word-break: keep-all;

    >span {
      margin-left: 5px;
      color: #99A1A8;
      font-size: 13px;
      font-style: italic;
      font-weight: 400;
      line-height: 16px;
    }
  }

랜더링된 화면

👆 이렇게 했는데도 <span>이 살짝 아래로 치우쳐 보이는 경우가 있죠.

그런데 신기하게도 같은 자리에 <img>를 넣으면 중앙 정렬이 딱 맞습니다.

<strong>타이틀 영역입니다 <img src="./images/badge.svg" alt="" /></strong>

img {
  width: 20px;
  height: 11px;
}

뱃지 이미지 처리

 

 

왜 이런 차이가 생길까요?

span과 img의 차이

span: 텍스트 계열 요소

• <span>은 원래 텍스트를 감싸는 inline 요소입니다.
• 브라우저는 이를 baseline(문자가 놓이는 기준선)을 기준으로 정렬하려고 해요.
• 그래서 line-height를 줄여도 실제 박스가 고정되지 않고, 폰트 메트릭스(ascender, descender)에 따라 살짝 어긋나게 보입니다.

즉, line-height만으로는 완벽한 “아이콘 박스”를 만들 수 없어요.

img: 치환 요소 (Replaced Element)

• <img>는 텍스트가 아니라 외부 리소스로 대체되는 치환 요소입니다.
• 브라우저는 <img>를 하나의 고정 박스로 인식합니다. (width × height)
• baseline 영향이 적기 때문에, vertical-align: middle이 적용되면 부모 라인박스 기준으로 정확히 중앙에 옵니다.

결국, 같은 inline 요소여도 성격이 달라서 정렬 결과가 다른 거죠.

span을 img처럼 쓰고 싶다면?

아이콘을 반드시 <span>으로 구현해야 할 때가 있습니다. 예를 들어, 접근성 텍스트 처리, 폰트 아이콘, CSS 배경 아이콘 등등

이때는 아래처럼 처리하면 됩니다.

 

strong > span {
  display: inline-block;   /* span을 박스처럼 */
  height: 11px;            /* 고정 높이 */
  vertical-align: middle;  /* 부모 기준 중앙 정렬 */
  line-height: normal;     /* baseline 영향 제거 */
}

line-height만 주면 안 될까?

많이 하는 실수가 line-height: 11px만 주는 겁니다.
이 경우 span은 여전히 텍스트 박스이기 때문에, 브라우저가 baseline을 기준으로 정렬해 버립니다.
그 결과 중앙이 미묘하게 어긋날 수 있어요.

👉 그래서 반드시 height와 line-height: normal을 함께 써주는 게 안전합니다.

 

오늘 포스트에서는 span과 img의 동작 차이를 비교하며, 실무에서 헷갈리기 쉬운 수직 중앙 정렬의 비밀을 짚어봤습니다.

 

 

[React] React 개발 속도를 높이는 나만의 VS Code 스니펫 설정

 

[Javascript] 직관적이고 유연한 슬라이더! Slick 슬라이더를 통해 갤러리를 구현해보세요.

 

[Safari] 사파리 브라우저로 iPhone 웹 페이지 디버깅하는 방법 (feat. 웹 인스펙터)

 

[AI] 손필기는 이제 그만! 클로바 노트(CLOVA Note)의 음성 메모 혁신을 경험하세요!

 

[Git] Git Stash : 변경사항을 임시로 저장하는 방법