div에 img를 삽입하면 아래부분에 작은 여백이 생깁니다.
그 이유에 대해서 알아보도록 하겠습니다.
우선 HTML에 이미지를 삽입합니다.
<body>
<div>
<img src="./banana.jpeg" />abc
</div>
</body>그다음 여백의 공간을 파악하기 위해 CSS에서 background-color 설정을 통해 색을 넣습니다.
<style>
div {width: max-content;margin: 20px;background: red;}
<style>이미지 하단에 빨간색으로 튀어나오는 부분이 보입니다.
그 이유는 img의 display속성(=화면을 배치하는 방법)이 기본적으로 inline(글자로 취급하는 요소)요소이기 때문입니다.
이러한 inline요소는 상하 정렬을 맞추기 위해서 보이지 않는 가상의 가로선이 존재합니다. 이것을 baseline이라고도 합니다.
기본적으로 이미지든 텍스트든 inline 요소에 들어있는 내용은 이 baseline 바로 위에 놓여집니다.
그래서 이미지는 글자 높이에 맞추는 inline속성 때문에 베이스라인 아래가 항상 비어있게 되어 의도치않는 여백이 생기게 됩니다.
그렇다면 이런 문제를 어떻게 해결할 수 있을까요?
가장 쉬운 방법은 CSS에 vertical-align속성을 사용하여 inline의 상하 정렬기준을 baseline이 아닌 bottom 또는 top으로 변경하는 것입니다.
<style>
img{ vertical-align: bottom;}
</style>또는
<style>
img{ vertical-align: top;}
</style>두번째 방법은 img의 기본값인 inline을 block 처리 하는 것입니다.
<style>
img {display: block;}
</style>단! 이 경우에는 이미지가 여러장일 경우 더이상 좌우로 배치되지않고 상하로 되기때문에 주의하셔야합니다.
마지막으로 img<속성>을 직접 설정하지 못하는 상황이라면?
img요소를 품고 있는 부모속성을 CSS에서 line-height 0을 추가하는 것입니다.
<style>
div{ line-height: 0;}
</style>이렇게해서 img태그의 불필요한 여백을 없애는 3가지 방법을 알아보았습니다.
