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

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

웹툰 캐릭터 표정

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

<div class="txtoon"><div>
<img src="https://img.gryeo.com/txtoon/js_11.gif" alt="웹툰 캐릭터 표정" class="tximg" />
<div></div>
</div></div>

웹툰 캐릭터 표정

원래 내가 의도한 것은 위처럼 상단에 여백이 전혀 없게 나와야 한다.
위의 코드는 아래와 같다.

<div class="txtoon"><div>
<div><img src="https://img.gryeo.com/txtoon/js_11.gif" alt="웹툰 캐릭터 표정" class="tximg" /></div>
<div></div>
</div></div>

코드를 보면 두껍게 표시한 부분, 즉 이미지를 따로 div로 감싸줬느냐 아니냐의 차이가 있다.

첫번째 내 의도대로 나오지 않은 부분을 크롬의 “페이지 소스 보기”로 봤더니 이미지 코드 옆에 빨간색의 </p> 코드가 생겨 있었다.
이것 때문에 이상한 여백이 생긴게 아닌가 싶다.

이미지를 div로 감싸주니까 문제가 사라졌다.

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

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다