div {
width: 510px;
background-color: red;
} <div>
<img src="https://cdn.pixabay.com/photo/2017/02/09/09/11/starry-sky-2051448__340.jpg" alt="사진이 없어요">
</div>
위 사진의 하단을 보면 div의 배경 색인 빨간색 튀어나와있다. div가 이미지 크기에 맞춰 커지게 하기 위해 height 값을 주지도 않았는데 왜 저런 여백이 생길까.
vertical-align
문제를 해결하려면 인라인 요소를 살펴봐야 한다. 인라인 요소는 기본값으로 vertical-align:baseline을 가진다. baseline에 맞춰 텍스트가 정렬이 된다.
그런데 영어 소문자의 y, g, q 같은 글자들은 baseline을 넘어가게 된다. 그래서 저런 꼬리 부분을 그리기 위한 공간이 더 필요한 것이다.
결국 꼬리를 그리기 위해 더 필요한 저 공간이 이미지를 넣을 때도 알 수 없는 여백처럼 나타나는 것이다.
참고
middle라인은 텍스트의 중심이기 때문에 폰트 종류에 따라 달라질 수 있다. 그래서middle이라고 꼭 중간에 들어가는 것은 아니다.
해결 방법
display: block
인라인 요소라서 발생하기 때문에 display:block을 해줄 경우 해결할 수 있다.
하지만 이미 작업이 많이 진행된 상태라면 이미지 태그를 블록 요소로 바꾸면 앞서 작업한 레이아웃들이 틀어질 수 있다.
margin-bottom 음수로 주기
생긴 여백이 보이지 않게 음수로 margin-bottom을 줄 수 있다.
img의 부모 요소에 font-size:0 주기
부모 요소에 font-size:0을 주면 해결이 된다. 이 경우는 내부에 img 태그만 있을 경우에 적합한 것 같다.
vertical-align
vertical-align 속성을 다른 값으로 줌으로써 공간을 없앨 수 있다.
위에서 말한 이미지 태그의 알 수 없는 여백은 우리가 레이아웃을 잡는데 방해되는 요소이기에 초기화를 해줘야 하는 대상으로 볼 수 있다. 빔캠프 강의에서는 초기화할 때 vertical-align:top으로 해주는 것을 추천한다.
