css | 1원팁) 이미지가 있는 div 아래 공간이 뜨는 이유
페이지 정보
- 작성자:
- 핵탐
- 작성일
- 12.18 10:47
- 조회
- 2,549
- 댓글
- 0
본문
div 안에 이미지를 넣었습니다.
[code]
<div><img src="냥냥이.png" /></div>
[/code]
이미지 외에는 아무것도 없고 공백도 없습니다.
이렇게 나올거라 나올거라 예상합니다.
하지만 막상 출력해보면 이렇게 나옵니다.
ㅡ,.ㅡ ;;;
밑에 공백은 뭘까요? 왜 내가 넣지도 않은 공백이 나올까요?
이런 경우 많으시죠?
이건 img 도 글자와 마찬가지로 inline 속성을 가지고 있기 때문입니다.
영문자열 "Academy" 를 생각해보죠.
a, e, m 을 기준으로 보면 A, d 는 위로 솟아있고 y 는 밑으로 솟아 있습니다.
a, e, m 의 아래쪽 기준이 baseline 이고 y는 baseline 밑으로 삐죽 나와 있죠?
무슨 말인고 하니...]
여기서 파란색 라인이 baseline 이고 그아래로 빨간색 박스의 영역이 있다는 거죠.
이미지도 inline 속성이라 글자처럼 취급되기 때문에 저 공간이 있어 공백이 생기는 겁니다.
그럼 어떻게 해야 하느냐?
간단합니다. img 를 block 속성으로 만들면 됩니다.
[code]
<div><img src="냥냥이.png" style="display: block" /></div>
[/code]
결과는 아래와 같이 깔끔하게 나옵니다.

댓글 0개
등록된 댓글이 없습니다.