[CSS] 안 잡히는 알 수 없는 빈 여백 원인 찾기

css를 작성하다보면

왜인지 모르게 안잡히는 여백들이 몇가지 있다.

 

 

 

1. flex로 레이아웃 설정 안했을 경우!

- div사이에 font-size만큼의 빈 여백이 생긴다.

font-size : 0 해주면 해결은 된다.

 

 

2. 전체 요소 중 이미지들 크기 확인해보기 !

이미지 크기 width랑 hight를 둘다 설정해 줘야 한다.

width만 설정했을때 height도 줄어든것처럼 보이는데 원인을 찾다보면 이미지가 원래 height만큼 차지하고있다...

 

 

 

일단 내가 겪었던 문제의 해결방법은 위와 같은데,

혹시나 도저히 모르겠다 !!! 하는 분들을 위해 노가다 방법이있다.

 

모든 요소를 일단 주석처리하고..

하나하나 주석 풀어보면서 뭐가 여백을 만들어내는지 찾아내는 것이다.

보통 하다보면 뭐땜에 이상한 여백이 생기는지 나오게 되어있다.

획기적인 방법은 아니긴 하다만... 도저히 알 수 없을 때 쓰면 될듯?하하 화이팅