2018 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
이미지에 여백이 생길 때 해결 방법들

이미지 태그를 이용하다보면 이상한 약간의 여백이 발생한다.

위 이미지를 보면 사진틀 이미지를 위아래로 나눈 것인데 아랫부분에 여백으로 인해서 약간의 공간이 생겼다.
확대해서 보면 아래와 같다.

 

약간의 여백이 생겨서 위 아래 이미지가 떨어진 현상을 발견하였다.
파이어 폭스로 해당 이미지의 부모 div 요소를 선택하면 아래와 같이 셀렉트 되어진다.

 

이유는 모르겠지만 해결 방법은 아래와 같다.

1. 이미지 요소에 vertical-align:top;을 삽입한다.

2.  li(리스트)에 연속으로 이미지를 넣을 때 1번의 vertical-align:top을 넣어도 여백이 생길 경우가 있다. 이럴 때는 이미지 부모 태그에 font-size:0;line-height:0;를 삽입한다.

3. 그래도 되지 않는다면 해당 이미지 요소에 display: block;을 삽입한다.

정상적으로 이미지가 적용되면 아래처럼 여백이 없어진다.

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
.