공백이 나타나는 이유는?
inline inline-block 화이트 스페이스가 생깁니다.
공백 해결하는 방법
1. <html>에서 <img>태그를 일렬로 표기한다.
가장 일반적으로 한다면 <html> 문서 에서 합니다. .contents 안에 img 태그가 행으로 되어 있지 않고 일렬로 표기해서 공백을 없애줄 수 있지만, 코드 가독성이 안 좋아서 추천드리지 않습니다.
<div class="contents">
<img src="" alt=""><img src="" alt=""><img src="" alt="">
</div>2. <img>태그의 요소를 바꾼다.
이미지태그가 인라인요소이기 때문에 공백이 나타납니다. display: block; 으로 요소를 변경해주시면 공백이 없어집니다. 공백을 없애주기위해 요소를 바꾸면 해결이 됩니다.
img {
display: block;
}3. <img>태그에 vertical-align 속성을 준다.
display: block 으로 요소를 변경해서 공백을 없애줬는데 <img>태그는 블록요소로 되었습니다. 블록요소로 되지 않고 공백을 없애주고 싶으면 vertical-align: bottom; 으로 해주시면 공백이 없어집니다. 참고로 속성값 top 도 가능합니다.
img {
vertical-align: bottom;
}
코드를 기록하는 공간