[CSS] Font Awesome 을 다른 요소와 겹치게 사용할 때 생기는 간격 없애기

position으로 요소끼리 겹치는 것을 구현했더니.. 생각지 못했던 문제에 직면할 때가 있습니다.

이번시간에는 생각치 못한 간격이 발생했을 때 해결하는 방법에 대해서 알아봅니다.

 

 

- 문제발생: img 위에 icon을 겹치게 만들기 위해서 position으로 왼쪽으로 이동

- 문제원인: position으로 이동한 후에도 icon이 원래 있었던 자리에도 공간을 차지함

 

position:relative로  img와 font awesome icon 을 겹치게 만들었을때 생기는 간격

 

이걸 없애는 방법은 간단합니다.

 

width: 0;
height: 0;

으로 만들어주면 끝!