1원팁) 이미지가 있는 div 아래 공간이 뜨는 이유
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]
결과는 아래와 같이 깔끔하게 나옵니다.
댓글 5개
이순진장군
4년 전
정보 감사합니다
4년 전
좋은정보 감사
4년 전
좋은정보 감사합니다
4년 전
정보 감사 드립니다.
3년 전
도움이 되는 유용한 팁, 감사드립니다.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4429 | ||
| 2694 | 2개월 전 | 199 | ||
| 2693 | 2개월 전 | 157 | ||
| 2692 | 2개월 전 | 164 | ||
| 2691 | 2개월 전 | 179 | ||
| 2690 | 2개월 전 | 332 | ||
| 2689 | 2개월 전 | 243 | ||
| 2688 |
 SIR개발팀 |
2개월 전 | 445 | |
| 2687 | 2개월 전 | 298 | ||
| 2686 |
선택과집중
|
2개월 전 | 335 | |
| 2685 | 2개월 전 | 298 | ||
| 2684 | 2개월 전 | 357 | ||
| 2683 | 3개월 전 | 488 | ||
| 2682 | 3개월 전 | 282 | ||
| 2681 | 3개월 전 | 307 | ||
| 2680 |
선택과집중
|
3개월 전 | 281 | |
| 2679 | 3개월 전 | 335 | ||
| 2678 |
 Xenon54 |
3개월 전 | 433 | |
| 2677 |
Xenon54 |
3개월 전 | 506 | |
| 2676 | 3개월 전 | 332 | ||
| 2675 | 3개월 전 | 309 | ||
| 2674 |
선택과집중
|
3개월 전 | 484 | |
| 2673 |
 ideaman |
3개월 전 | 325 | |
| 2672 | 3개월 전 | 342 | ||
| 2671 | 3개월 전 | 290 | ||
| 2670 | 3개월 전 | 265 | ||
| 2669 | 3개월 전 | 378 | ||
| 2668 | 3개월 전 | 294 | ||
| 2667 |
선택과집중
|
3개월 전 | 491 | |
| 2666 |
선택과집중
|
3개월 전 | 474 | |
| 2665 |
선택과집중
|
4개월 전 | 412 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기