이게 이 블로그에서만 그런 건지 잘 모르겠는데 특정한 상황에서 상단에 이상한 여백이 생길 때가 있다.
이미지 위의 상단의 여백은 의도적으로 정한 것이 아니다.
위의 코드는 아래와 같다.
<div class="txtoon"><div>
<img src="https://1.bp.blogspot.com/-3ZCaaYayL7g/YCoZkwVV6WI/AAAAAAABKrw/2uFwJh17XDA9rcpZ9ob_1qsFvS0jVPGYwCLcBGAsYHQ/s0/gri2020js_11.gif" alt="웹툰 캐릭터 표정" class="tximg" />
<div></div>
</div></div>
원래 내가 의도한 것은 위처럼 상단에 여백이 전혀 없게 나와야 한다.
위의 코드는 아래와 같다.
<div class="txtoon"><div>
<div><img src="https://1.bp.blogspot.com/-3ZCaaYayL7g/YCoZkwVV6WI/AAAAAAABKrw/2uFwJh17XDA9rcpZ9ob_1qsFvS0jVPGYwCLcBGAsYHQ/s0/gri2020js_11.gif" alt="웹툰 캐릭터 표정" class="tximg" /></div>
<div></div>
</div></div>
코드를 보면 두껍게 표시한 부분, 즉 이미지를 따로 div로 감싸줬느냐 아니냐의 차이가 있다.
첫번째 내 의도대로 나오지 않은 부분을 크롬의 “페이지 소스 보기”로 봤더니 이미지 코드 옆에 빨간색의 </p> 코드가 생겨 있었다.
이것 때문에 이상한 여백이 생긴게 아닌가 싶다.
이미지를 div로 감싸주니까 문제가 사라졌다.
