바깥 block box와 이미지 사이에 공백이 생겼어요. (feat. vertical-align)

Img 공백 발생

block 박스 안의 inline요소는 line-height로 인해서 gap이 발생한다. 이것은 inline 요소가 해당 요소를 텍스트처럼 인식하기 때문이다.

기본적으로 컴퓨터는 서구 문화권에서 시작되었다. 그렇기 때문에 컴퓨터에서 보이는 HTML은 자연스럽게 서구 문화권의 텍스트 작성 방법을 반영하게 되었다. 그런데 알파벳을 쓸 때는 눈에 보이지는 않지만 디센더와 어센더라는 것이 존재하고 이에 맞춰서 텍스트를 작성하게 된다.

물론 실제 텍스트를 작성하는 것과 브라우저에서 보이는 텍스트가 완전히 동일하게 동작하지는 않는 것 같지만, 그럼에도 기본적인 부분은 알파벳의 텍스트 작성 방법에 맞춰서 동작하게 되는 것이다. 

그런데 문제는 이미지를 사용할 때 발생한다. 이미지를 보이게 하기 위한 img요소는 inline 요소이기 때문에 베이스라인에 맞춰서 이미지가 정렬된다. 때문에 베이스라인과 디센더라인 사이의 여백인 디센더가 이미지와 외부 block box 사이에 존재하게 되는 것이다.

그래서 이 것을 해결하기 위해서는 img 요소의 vertical-align 값을 기본값인 baseline이 아닌 bottom, middle, top 등으로 변경해줘야 한다. (보통은 top으로 변경함)

img {vertical-align : top;}

어센더와 디센더

우리는 알파벳을 쓸 때 어센더와 디센더가 있고, 그에 맞춰서 쓰고 있다는 사실을 의도치 않게 익혔고, 어렴풋이 알고 있다. 다만 어센더와 디센더라고 부르는 것을 몰랐을 뿐이다.

지금 하는 이 말이 거짓말이 아니라는 것은 처음 알파벳을 배울 때 사용하는 영어노트를 떠올려보면 알 수 있다.

영어노트 - 이미지 출처 : 팝콘에듀 사이트

하지만, 위 이미지만으로는 어센더가 무엇인지, 디센더가 무엇인지 정확하게 알 수는 없다. 그래서 어센더와 디센더를 설명해 줄 수 있는 이미지를 준비했다.

어센더, 디센더 설명 이미

이미지에 작성되어 있는 것처럼 알파벳은 어센더라인, X-라인, 베이스라인, 디센더 라인에 맞춰 글자를 쓴다. 어센더 라인과 X-라인 사이를 어센더, X-라인과 베이스라인 사이를 X-높이, 베이스라인과 디센더 라인 사이를 디센더라고 한다.

그리고 inline 속성을 가지고 있는 이미지는 이미지상에 빨간색으로 표시되어 있는 베이스라인에 맞춰서 보이기 때문에 빨간색으로 표시되어 있는 베이스 라인과 가장 아랫줄의 디센더 라인 사이의 공간인 디센더가 바깥 block box와 이미지 사이의 여백으로 보이게 되는 것이다.

위에서도 말했지만 사실 브라우저에서는 실제 타이포 작성 방식과 완전히 동일하게 동작하지는 않는 것 같다.

mdn 문서를 확인해 보면 vertical-align 은 여러 속성을 가지고 있다. top은 어센더라인, baseline(기본값)은 베이스라인, bottom은 디센더라인에 해당한다. 하지만 x라인에 대한 속성값은 없다고 보인다.

vertical-align

vertical-align은 inline 또는 table-cell box에서의 수직 정렬을 지정한다.

vertical-align의 속성

• baseline
• sub
• super
• text-top
• text-bottom
• middel
• top
• bottom
• <percentage>
• <length>

이 속성들은 inline 요소에서 적용할 때와  table-cell 에서 사용할 때가 다르게 적용된다.

table-cell 에서 사용되는 top, middle, baseline, bottom 은 단어의 뜻이 가져오는 것과 크게 별다른 점이 없으므로 일반적으로 사용하면 된다. 하지만 inline에서 사용할 때는 어떻게 적용되는지 알아두는 것이 좋을 것 같다.

inline 요소에 적용할 때

inline 요소에 vertical-align을 적용하는 것은 사실 주로 부모 엘리먼트에 대하여 상대적으로 수직 정렬하는 것을 의미한다. 예를 들어서 이미지와 텍스트를 나란히 정렬하거나, 텍스트를 작성 중에 강조하기 위해 일부 단어만 span을 통해 폰트 사이즈를 키우고 정렬하는 경우에 유용하게 사용할 수 있다.

아래의 이미지는 vertical-align의 값에 따른 결과를 눈으로 확인하기 위하여 block box인 div 와 inline 요소인 span에 작성한 텍스트를 간단한 CSS를 통해 스타일링한 결과물을 보여주는 이미지이다. (span에는 "Kim kyuree"라는 글씨를 작성했다.)

기본이 되는 아래의 이미지는 모든 글씨가 아래에 존재하는 가상의 선을 기준으로 정렬되어 있는 것처럼 보이는데, 이 가상의 선이 baseline이며, 이 선을 기준으로 정렬되어 있는 것이다.

vertical-align : baseline; 적용된 이미지

아래에서부터는 vertical-align이 변경되었을 때 어떻게 보이는지 확인하려고 한다.

1. vertical-align : top;

   

2. vetical-align : middel;

   

3. vertical-align : bottom;

   

위에 작성한 top, middle 설정은 사실 보이는 그대로라서 크게 설명할 필요가 없을 것 같다. 하지만 bottom으로 설정한 부분은 baseline으로 설정되어 있는 기본값과의 비교를 해보면 차이점이 확실히 느낄 수 있다. 

baseline으로 설정된 기본 이미지의 작은 글씨를 보면 노란색으로 표시되어 있는 block 박스에 padding 값을 적용한 것처럼  박스의 아웃라인에서 어느 정도 떨어져 있는 것을 볼 수 있다. 반면 bottom으로 설정된 이미지의 작은 글씨는 노란색 박스에 거의 딱 붙어서 보이고 있다. (약간의 공간은 텍스트 자체의 line-height에 따른 여백인 것으로 생각된다.)

지금은 텍스트로 설정을 했지만 사실img와 텍스트의 정렬도 위의 예시 이미지와 같으므로 필요한 부분에 적절하게 사용하면 좋을 것 같다.

참고자료

vertical-align mdn