[Frontend] #2. table td 태그에 img 태그 사용할 때 height 값이 달라지는 현상

1. <td>에 <img>를 사용할 때 height 값이 달라지는 이유

간단한 문제였지만 나중에 기억나지 않을 것 같아서 기록한다.

 

<td>태그 안에 이미지를 넣을때 td내부 패딩이 있는것도 아니고, 이미지 margin, border가 없는데도 이상한 px값이 아래에 추가되어 td높이값이 달라지는 현상이 있었다.

 

default td height는 보통 font-size와 line-height의 영향을 받게 되는데, inline요소인 img요소가 들어가서 생기는 문제이다.

 

---

2. 해결 방법

1. td태그내에 img 태그가 아닌 td의 background를 이용하여 해결하는것이 좋은 방법이다.

 

2. td에 line-height를 0px나 0% 등으로 없애는 방법 or img 태그에 display:block 스타일을 적용하여 해결 할 수 있다.