[html/css] div 이미지 공백 없애기
div나 table 안에 이미지를 넣다 보면 뜻하지 않게 공백이 생기는 경우가 있더군요
오늘은 table, div 이미지 공백을 없애는 방법을 알아 보겠습니다~
이미지 공백은 왜 생기는 것일까?
이미지는 인라인 요소인데요, 인라인 요소를 사용하면 보이지 않는 라인 박스(행 박스)를
생성합니다. 이 박스 안의 내용을 수직 정렬할 때 두 가지 방식이 존재합니다.
인라인 요소의 수직 정렬
-비표준 모드(IE7이하, doctype 선언하지 않은 문서): 박스의 border bottom에 맞추어 정렬
-표준 모드(doctype 선언한 문서): baseline에 맞추어 정렬
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE
예문을 통해 살펴 볼게요~
<!DOCTYPE html>
<html>
<style>
div{
background: blue;
}
</style>
<body>
<div><img src="cat.png"></div>
</body>
</html>
아래 이미지에서 (1)번은 doctype 선언 없이 작성
(2)번은 <!DOCTYPE html>을 추가함.
너비와 높이를 지정하지 않은 div에 이미지를 넣었고 배경색은 파란색으로 지정했는데요
(2) 밑 부분에 살짝 공백이 생겼습니다.
(1) 비표준 모드로 실행
(2) 표준 모드로 실행
기준선(baseline)이란?
위에서 기준선(baseline)에 맞추어 정렬한다고 했는데 기준선이란 무엇일까요?
글꼴은 기준선, 어센더, 디센더로 나눌 수 있는데요
기준선(baseline)- 꼬리 부분(p, q, j, y등에서 아래 삐침)을 뺀 밑 선
디센더(descender) -기준선보다 밑으로 처진 부분(p, q, j, y 등에서 아래 삐침)
어센더(ascender)- 일반 소문자(a,c,e 등)보다 위로 나온 부분(b, d, f, h 등)
라인 박스 안에 글자가 없고 이미지만 있다 하더라도, 보이지 않는 글자의 디센더를 고려하여
기준선에 맞추다 보니 하단에 공백이 자연스레 생깁니다.
아래 글도 참조 필!
vertical-align 속성 자세히 알기(수직 정렬)
div 이미지 공백 없애기
방법 하나. 인라인 요소(이미지)를 블록 요소로 만들기
인라인 요소로 인해 생성된 박스의 수직 정렬이 문제이므로, 인라인 요소를 블록 요소로 만듭니다.
스타일 영역에 아래 빨간 부분만 추가하면 됩니다.
<style>
div{
background: blue;
}
img{
display: block;
}
</style>
방법 둘. 인라인 요소의 기준선을 bottom에 맞추기(vertical-align: bottom)
<style>
div{
background: blue;
}
img{
vertical-align: bottom;
}
</style>
방법 셋. 이미지에 margin-bottom 음수값을 지정
<style>
div{
background: blue;
}
img{
margin-bottom: -3px;
}
</style>
방법 넷. 비표준 모드나, 거의 표준 모드로 실행하기
HTML 작성 시 DOCTYPE을 선언하면 표준 모드로 실행하며, DOCTYPE 선언이 없으면 비표준 모드로 실행합니다~
하지만 이미지 하나 때문에 비표준 모드로 실행하기엔 다소 위험하므로
각 상황에 알맞게 선택을 해주셔야 합니다~
위의 방식대로 해도 공백이 사라지지 않을 경우?
코딩할 때 줄바꿈(line break)이나, 공백(space), 들여쓰기(tab)가 없는지 확인해주시고요~
margin:0px; padding:0px; 도 같이 추가해 주세요~
table 이미지 공백 없애기는 다음 글 참조해주세요~
「참조」
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
「같이 읽어 보면 좋은 글」
white-space 속성(pre, pre-wrap, pre-line 차이)
display 속성 (inline, block, none, inline-block 차이), visibility 속성(visible, hidden, collapse 차이)
margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법)
border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법)
'css' 카테고리의 다른 글
| css로 table 속성 지정(너비,높이,글자색,배경색,선그리기) (1) | 2014.06.25 |
|---|---|
| table 이미지 공백 없애기 (0) | 2014.06.24 |
| word-break 줄바꿈 속성(break-all, keep-all) (0) | 2014.06.19 |
| word-wrap 줄바꿈 속성(normal, break-word) (1) | 2014.06.18 |
| white-space 속성(pre, pre-wrap, pre-line 차이) (1) | 2014.06.17 |
댓글