워드프레스에서 div에 생기는 상단 여백 없애기

이게 이 블로그에서만 그런 건지 잘 모르겠는데 특정한 상황에서 상단에 이상한 여백이 생길 때가 있다.

웹툰 캐릭터 표정

이미지 위의 상단의 여백은 의도적으로 정한 것이 아니다.
위의 코드는 아래와 같다.

<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로 감싸주니까 문제가 사라졌다.

This entry was posted in 블로그, 워드프레스, HTML. Bookmark the permalink.

댓글 남기기