[CSS] div 이미지 공백 없애기 > 온라인강의

본문 바로가기
 
 
 
오늘 385
어제 1,573
최대 2,526
전체 3,396,477

최근 방문자

1853
1775
1756
1706
1573
385
19 20 21 22 23 24
비즈니스의 시작 비즈명함 ~ 가격, 품질, 배송 3가지 만족을 드리는 비즈명함 / 즉석명함 / 급행서비스 / 서울 전지역 수도권일부 3시간배송

select * from g5_menu where me_use = '1' and me_link like '%lecture%'
온라인강좌 홈 > 온라인강좌 > 온라인강좌

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

페이지 정보

작성일2016-08-09 11:33 조회1,882회 댓글0건

본문

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

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

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


[방법 1] 인라인 요소(이미지)를 블록 요소로 만들기
인라인 요소로 인해 생성된 박스의 수직 정렬이 문제이므로, 인라인 요소를 블록 요소로 만듭니다.

<style>
img{
    display: block;
}
</style>


[방법 2] 인라인 요소의 기준선을 bottom에 맞추기(vertical-align: bottom)
<style>
img{
    vertical-align: bottom;
}
</style>


[방법 3] 이미지에 margin-bottom 음수값을 지정
<style>
img{
    margin-bottom: -3px;
}
</style>


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


관련자료
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
http://aboooks.tistory.com/m/post/193
  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


목록

Total 2,005건 1 페이지
온라인강의 목록
번호 제목
2005
2004
2003
2002
2001
2000
1999
1998
1997
1996
1995
1994
1993
1992
1991
1990
1989
1988
1987
1986
1985
1984
1983
1982
1981
게시물 검색
 
 
상호: 해피정닷컴 대표:정창용 사업자등록번호:119-05-36414 (08394) 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
전화: 070-7600-3500 팩스:02-865-3528 개인정보관리:정창용 mail@happyjung.com 에스크로확인
개인정보취급방침
COPYRIGHT 2001~2017 해피정닷컴. All rights reserved. 부가통신사업신고:서울체신청-1217 통신판매신고:2014-서울구로-0074
 
모바일 버전으로 보기