SIR

1원팁) 이미지가 있는 div 아래 공간이 뜨는 이유 > 그누보드5 팁자료실

그누보드5 팁자료실

1원팁) 이미지가 있는 div 아래 공간이 뜨는 이유 정보

1원팁) 이미지가 있는 div 아래 공간이 뜨는 이유

본문

div 안에 이미지를 넣었습니다.


<div><img src="냥냥이.png" /></div>

 

이미지 외에는 아무것도 없고 공백도 없습니다.

31258236_1608255451.289.jpg

이렇게 나올거라 나올거라 예상합니다.

 

하지만 막상 출력해보면 이렇게 나옵니다.

31258236_1608255489.7037.jpg

ㅡ,.ㅡ ;;;

밑에 공백은 뭘까요?  왜 내가 넣지도 않은 공백이 나올까요?

이런 경우 많으시죠?

 

이건 img 도 글자와 마찬가지로 inline 속성을 가지고 있기 때문입니다.

영문자열 "Academy" 를 생각해보죠.

a, e, m 을 기준으로 보면 A, d 는 위로 솟아있고 y 는 밑으로 솟아 있습니다.

a, e, m 의 아래쪽 기준이 baseline 이고 y는 baseline 밑으로 삐죽 나와 있죠?

 

무슨 말인고 하니...]

 

31258236_1608255786.0873.jpg

 

여기서 파란색 라인이 baseline 이고 그아래로 빨간색 박스의 영역이 있다는 거죠.

이미지도 inline 속성이라 글자처럼 취급되기 때문에 저 공간이 있어 공백이 생기는 겁니다.

 

그럼 어떻게 해야 하느냐?

 

간단합니다.  img 를 block 속성으로 만들면 됩니다.


<div><img src="냥냥이.png" style="display: block" /></div>

 

결과는 아래와 같이 깔끔하게 나옵니다.

31258236_1608255451.289.jpg

추천13

댓글 4개

전체 1,784 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT