[vertical-align] 이미지랑 span이 높이가 안맞을 때

<div>

    <img>

    <span>

</div>

 

텍스트 왼쪽에 이미지를 위와 같이 배치하고 싶을 때,

수직의  y축 위치를 딱 맞추고 싶어도 살짝 엇나가는 것을 확인할 수 있다.

 

img 의 vertical-align 속성이 baseline이 default로 되어있기 때문.

텍스트의 위 빨간줄에 맞춰 이미지를 띄워주게 된다.

따라서 이를 조정하고 싶다면 vertical-align 속성을 바꿔주면 됨.

 

 

 

 

 

출처 : developer.mozilla.org/ko/docs/Web/CSS/vertical-align

          mygumi.tistory.com/368