프리랜서 웹디자이너 무료폰트 RELATION.CO.KR

RELATION 로고

홈페이지 소스

[CSS] div 이미지 공백 없애기

2017.11.23
div나 table 안에 이미지를 넣다 보면 뜻하지 않게 공백이 생기는 경우가 있다.

이미지 공백은 왜 생기는 것일까?
이미지는 인라인 요소인데, 인라인 요소를 사용하면 보이지 않는 라인 박스(행 박스)를 생성합니다. 이 박스 안의 내용을 수직 정렬할 때 두 가지 방식이 존재합니다.


인라인 요소의 수직 정렬
-비표준 모드(IE7이하, doctype 선언하지 않은 문서): 박스의 border bottom에 맞추어 정렬
-표준 모드(doctype 선언한 문서): baseline에 맞추어 정렬


기준선(baseline)이란?
기준선(baseline)- 꼬리 부분(p, q, j, y등에서 아래 삐침)을 뺀 밑 선
디센더(descender) -기준선보다 밑으로 처진 부분(p, q, j, y 등에서 아래 삐침)
어센더(ascender)- 일반 소문자(a,c,e 등)보다 위로 나온 부분(b, d, f, h 등)

라인 박스 안에 글자가 없고 이미지만 있다 하더라도, 보이지 않는 글자의 디센더를 고려하여 기준선에 맞추다 보니 하단에 공백이 자연스레 생깁니다.



div 이미지 공백 없애기
1. 인라인 요소(이미지)를 블록 요소로 만들기
<style>
div {background:blue;}
img {display:block;}
</style>

2. 인라인 요소의 기준선을 bottom에 맞추기
<style>
div {background:blue;}
img {vertical-align:bottom;}
</style>

3. 이미지에 margin-bottom 음수값을 지정
<style>
div {background:blue;}
img {margin-bottom:-3px;}
</style>

4. 비표준모드나 거의 표준 모드로 실행하기
HTML 작성 시 DOCTYPE을 선언하면 표준 모드로 실행하며, DOCTYPE 선언이 없으면 비표준 모드로 실행합니다~
하지만 이미지 하나 때문에 비표준 모드로 실행하기엔 다소 위험하므로 상황에 알맞게 선택



위의 방식대로 해도 공백이 사라지지 않을 경우?
코딩할 때 줄바꿈(line break)이나, 공백(space), 들여쓰기(tab)가 없는지 확인해주시고요
margin:0px; padding:0px;   도 같이 추가해 주세요~


참조 : https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps

이 포스트 공유하기

글수정  글삭제 전체목록