[PoiemaWeb] image 요소 아래 패딩된 여분의 공간 제

• 컨테이너 요소로 img 요소를 래핑하면 img 요소 아래에 의도하지 않은 여분의 공간이 패딩된다.
• image 요소는 inline 요소이다. 다시 말해 image 요소는 텍스트로 취급된다. 브라우저는 요소 내의 텍스트를 렌더링할 때 나름의 방식이 있는데 이를 이해하려면 티아포그래피(Typography)에 대해 어느 정도 이해해야 한다.

티아포그래피

• image 요소에도 디센터가 적용되어 여분의 공간이 발생한다.

 

1. image 요소를 블록 요소로 전환하면 더 이상 텍스트로 취급되지 않는다.

• 하지만 이 방법은 image 요소를 블록 요소로 전환할 수 없는 레이아웃에서는 사용할 수 없다.

2. inline 요소에 사용할 수 있는 vertical-align 프로퍼티를 사용하는 방법이 있다. vertical-align 프로퍼티의 기본값은 
    baseline인데 이를 변경하여 이미지 표시 위치를 조정하는 것이다.