H태그 안에 이미지를 넣을 때 IE 여백 해결 방법

진샘 2025.08.20 댓글 6

h2 태그 안에 이미지를 넣었더니 IE7에서 이미지 아래에 여백이 생겨요.
`h2 { font-size: 1px; }`로 조정하면 IE7은 괜찮은데 IE6에서는 이미지가 조금 잘립니다. 다른 해결 방법이 있을까요?

해샘찬 2025.08.20

IE6에서 잘린 건 이미지에 margin-top을 줘서였네요 ㅠㅠ
해결 방법은 `font-size: 0;`이었어요. 댓글 감사합니다!
FaintTears 2025.08.20

margin과 padding은 처음에 초기화해 둔 상태예요.
말씀해 주신 방법도 적용해 봤는데 해결되지 않네요. h2의 기본 글자 크기만큼 영역이 잡히는 것 같아 `font-size: 0;`이 맞는 듯한데, IE6에서 조금 잘리는 이유가 궁금해요.
한 페이지에 같은 형태의 h2 마크업이 여러 개 있어요.
꼬붕 2025.08.20

말씀하신 것처럼 h2의 margin과 padding을 0으로 지정하는 게 좋을 것 같아요.
브라우저마다 기본값이 달라서 처음에 초기화해 두면 편합니다.
Regretting 2025.08.20

`font-size: 0;`으로 해보세요.
다가 2025.08.20

이미지 크기를 몰라서 높이값은 지정하지 않았어요.
이미지보다 높이를 조금 크게 잡고 위치를 조절해 보세요.
찬솔나라 2025.08.20

방법 1: h2의 margin과 padding을 0으로 지정해 보세요.
방법 2: 이미지를 배경으로 처리하고, 별도의 요소에 제목 내용을 넣어 표시를 조정하는 방법도 있어요.

프로그램 개발일반 다른 글