보통 background color 위에 img 를 놓으면 약간의 간격이 밑에 차이가 나는걸 볼 수 있다.
자 여기 밑에 공간이 있는게 보인다
결론적으로 말하자면 <img> 라는 태그는 inline 요소이기 때문에 차이가 나는 거다.
자 그러면 inline 에 대해 알아보자.
가로, 세로 값을 가질 수 없고 margin 과 padding 의 값을 가질 수 없다.
보통 글자 다루는 용도로 쓰인다.
ex ) xyz 사이에 선을 그으면 y 자의 밑 꽁다리가 잘릴 거다. j 도 마찬가지…
xyz 사이에 그어진 선이 base_line 이다.
이러한 선을 base_line이라고 부른다.
결국 이미지 요소도 하나의 인라인 요소여서 base_line 위에 이미지가 놓이고 그 밑에 빈공간이 생기는 거라고 보면 된다.
안보이는 base_line이 존재하는거나 마찬가지
그래서 이러한 방법을 어떻게 해결 해야 하는가?
따로 css 에 img를 만드록 display : block를 추가 해준다. ⇒ inline 요소이지만 이 이미지를 하나의 상자 즉, 레이아웃으로 구성하겠다 라는 뜻으로 취급
img{
display: block;
}
css 로 이미지를 이렇게 지칭하면 된다.
사라진게 눈으로 바로 보인다. 오!