[css] img 하단에 생기는 알 수 없는 빈 공간

샘플코드에 대한 결과를 확인하면 img 하단에 살짝 여백이 생기는걸 확인 할 수 있다.

<div class="wrapper">
  <img src="https://picsum.photos/id/102/4320/3240" />
</div>

.wrapper {
  border: 1px solid black;
}

img {
  width: 200px;
  height: 200px;
}

 

이유는 img 태그는 magin, border, padding 기본적으로 잡혀져 있지 않지만, 인라인 요소이기에 텍스트와 같이 인라인 요소의 baseline 기준으로 배치되기 때문이다. 영어의 문자 특성 때문에 baseline 아래 decent height이라는 공간이 필요함

 

<div class="wrapper">
  <span>  
    <img src="https://picsum.photos/id/102/4320/3240" />
    apple banana cherry
  </span>
</div>

.wrapper {
  border: 1px solid black;
}

img {
  width: 200px;
  height: 200px;
}

span {
  background-color: orangered;
  padding-left: 4px;
}

 

 

해결방법은 여러 방법이 있지만 img tag에 display:block을 설정하는건 추천하지 않는다. 이유는 개발할 때 img 태그는 inline 요소라는 걸 전제로 개발하기 때문에 변경하면 side-effect가 발생할 수 있다

 

그래서 vertical-align: top 또는 bottom 속성을 추천한다. 특정 알파벳 속성 때문에 텍스트를 중간과 아래 그 사이에 배치해야 자연스럽게 노출된다. baseline으로 기본값이 설정되어있기 때문에 인라인 속성은 살짝 떠 있게 보인다. 그래서 top으로 설정하면  이미지와 텍스트 정렬 기준이 상단으로 일치하기 때문에 하단 공간이 없어진다.

 

<div class="wrapper">
  <span>  
    <img src="https://picsum.photos/id/102/4320/3240" />
    apple banana cherry
  </span>
</div>

.wrapper {
  border: 1px solid black;
}

img {
  width: 200px;
  height: 200px;
  vertical-align: top;
}

span {
  background-color: orangered;
}

 

 

 

 

https://www.youtube.com/watch?v=7oOai_rOnuI