Why an image inside a div has an extra space below the image?(DIV코딩시 이미지 밑에 공백이 생겼을 경우)

space

DIV
<div class=”app_photo”>
<img src=”imgs/photo_no.gif” />
<div class=”btn”><a href=”#”><span class=”s-green”>추가</span></a></div>
</div>

CSS
.app_photo { width:166px; margin: 10px auto 20px auto;

border: 5px solid #bec4d0; border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px;
}
.app_photo img { width:100%; height: 146px;
border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px;
}
.app_photo .btn { position: absolute; margin: 0 auto; margin-top:-35px; width:155px; }
.app_photo .btn a { width: 40px; height:40px; display: block; margin-left: 131px; background: url(../imgs/bl_plus.gif) 50% no-repeat #82c831;
-moz-box-shadow: inset 0 3px 3px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 3px 3px rgba(0,0,0,.2);
box-shadow: inset 0 3px 3px rgba(0,0,0,.2);
}
.app_photo .btn span { display:none; }

 

DIV 코딩시 이미지영역에 아무것도 설정하지 않았는데 이유없는 공백이 생성이 되었을 경우

1. img { display:block;  }

2. img { vertical-align:top; }

3. .app_photo { line-height:0; }

3가지 방법 중 선택해서 적용해 보면 공백이 없어지게 할 수  있다.

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다