[css] img하단요소에 생기는 빈공간은 무엇일까 ?

 

- 이미지를 div태그에 넣었을때 자세히 보면 밑에 흰색의 공간이 보인다. 

(body에 blue를 div에 white를 주었다.)

 

 

Q . 저 공간은 무엇일까?

 

<img>는  inline 요소이다 따라서 inline의 기준점인 base line 기준으로 배치가 되어 저런 현상이 나타난다.

다음 그림을 보면 이해가 더 쉬울것이다.

 

텍스트를 보면 빨간 base line 기준으로 하여 배치된것을 볼 수 있다. 이미지 또한 마찬가지다. 

따라서 저렇게 빈공간이 남게 되는 것이다. 그럼 저공간은 무엇일까 ?

 

바로 descender height라고 하는 공간이다.

 

 T와 e같은경우 base line을 기준으로 쓰여있지만 y와 p는 삐져나오는 부분이 있다. 이 경우를 고려하여 descender height 가 있는 것이다.

 

 

그렇다면 이를 해결할 수 있는 방법이 있을까?

 

바로 img에 다음 코드를 주면 된다.

img{
	vertical-align : top
}

 

이 의미는 밑에 그림과 같다.

즉 , 상단기준으로 배치를 한다는 뜻이다 . 따라서 더이상 밑에 공간이 남는 현상은 일어나지 않는다.

 

 

img에 vertical-align : top을적용했을때