블로그의 div 여백, 이미지 여백 없애는 방법들

워드프레스에서 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></p> 코드로 감싸지게 된다.

div로 감싸주면 p가 생기는 것을 방지하는 것 같다.

이미지 여백, 공백 없애기

스타일시트(style.css) 수정이 가능한 블로거(구글 블로그), 티스토리, 워드프레스 같은 곳에서 사용이 가능한 방법이다.

나는 아래의 방법을 평소에 사용했었고 그래도 지장이 없었다.

img {
margin: 0;
padding: 0;
}

a img {
border: none;
}

그런데 구글 블로그에서는 위의 코드를 적용해도 여백이 남아있었다.
그래서 포기하고 있었는데 인터넷을 뒤지다가 해결책을 찾았다!

img {
vertical-align:top
display:block;
}

참고로 네이버 블로그에서는 사진 첨부 창에서 “사진간격 띄우기”의 체크를 해제해주면 된다.