[css]이미지 여백 제거

이미지에 box-shadow로 그림자효과를 주는데 위처럼 그림자와 이미지 사이에 하얀 여백이 생겼습니다. 😫

분명 margin padding 다 0으로 됐는데 어디서 잘 못 된 걸까요?

원인

이미지의 display를 변경하지 않았기 때문에 생긴 문제였습니다.

이미지의 기본 display는 inline입니다. inline의 경우 block과 달리 가상의 기준선이 존재하는데 vertical-align의 baseline에 위치합니다. baseline은 하단 1~3px 정도이므로 이설정을 그대로 유지하면 이미지는 항상 하단에 여백이 있을 수밖에 없습니다.

즉, margin padding 전부 0이어도 저처럼 하얀 여백이 생깁니다.

해결

이미지의 display를 block으로 변경해줍니다.

참고

💻 https://uxgjs.tistory.com/45

💻 https://www.codingfactory.net/10814