See the Pen image 하단 공백 by 석금용 (@gmyong) on CodePen.
div 안에 img 태그를 추가했을 때 image 밑에 공간이 생깁니다.
image 밑에 공간이 왜 생길까?
img 태그는 inline 요소이기 때문입니다. inline 요소는 블록 요소와 달리 가상의 기준선에 맞춰서 그려지게 됩니다.
위 그림과 같이 'g'와 같은 글자는 bottom 영역까지 그려집니다. 이 때문에 inline 요소는 baseline에 맞춰져서 그려지고 baseline과 bottom라인의 공간이 필요합니다. img 태그 또한 글자는 아니지만 inline 요소이기 때문에 baseline과 bottom 라인 사이의 공간이 생겨서 밑에 공백이 보이는 것입니다.
어떻게 없앨까?
첫 번째로 vertical-align 속성에 baseline을 제외한 값을 적용하면 공백이 사라집니다.
두 번째로 image를 block 박스로 바꿔주어도 공백이 사라집니다.
세 번째로 이미지에 margin-bottom 음수 값을 적용하면 공백이 사라집니다.
네 번째로 img의 부모 요소에 font-size: 0;을 적용하면 공백이 사라집니다.
위 세 가지 말고도 비표준적인 방법 등 여러 가지 방법이 있습니다. CSS에 대해 어느 정도 지식이 있다고 생각했는데 여전히 모르는 게 많습니다. 계속적으로 꾸준히 공부해야 되는 게 개발이라는 것을 다시 한번 더 각인하게 되는 계기가 되었습니다.
※ 참고
'CSS' 카테고리의 다른 글
| IR 기법 - 대체 텍스트 숨김 (0) | 2020.07.24 |
|---|---|
| 웹 이미지에 대한 이해 (0) | 2020.07.22 |
| margin collapse (마진 병합) (0) | 2020.07.21 |
| 웹 접근성을 위한 텍스트 숨김 처리 (0) | 2020.07.17 |
| Negative margin (음수 마진) (0) | 2020.07.17 |