프리랜서 웹디자이너 RELATION 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

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3517
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3526
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2173
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20769
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 59
225 [소스] Window.scroll() 꿘쓰 2020.06.22 63
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 172
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 327
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 353
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 618
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 583
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 690
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 674
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 877
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 630
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 669