[CSS] vertical-align, img정렬 공백 현상

앤쨩·2021년 10월 27일

vertical-align, img정렬 공백 현상

이번 게시물은 CSS 속성 중 vertical-align과 inline태그에 대해 이야기 하고자 한다.
이야기 하고자 하는 이유는 '러쉬' 라는 웹페이지를 클론코딩 하던 중 어떤 문제에 맞닥뜨리게 되었기 때문이다.
img로 되어있는 배너들을 정렬하는 부분에서 이상한 공백이 생긴 것 이다.

🧾 필자가 작성한 코드

<!DOCUTYE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {margin: 0; padding: 0; box-sizing: border-box;}
      .box-wrap { display: flex; }
      .right-bottom { display: flex; }
      img { width: 100%; }
    </style>
  </head>
  <body>
    <div class="box-wrap">
      <div class="left">
        <a href="javascript:void(0)">
          <img src="./content2-banner1.jpg" alt="이미지1" />
        </a>
      </div> <!--left-->
      <div class="right">
        <div class="right-top">
          <a href="javascript:void(0)">
            <img src="./content2-banner2.jpg" alt="이미지2" />
          </a>
        </div>
        <div class="right-bottom">
          <div class="right-bottom-left">
            <a href="javascript:void(0)">
              <img src="./content2-banner3.jpg" alt="이미지3" />
            </a>
          </div> <!--right-bottom-left-->
          <div class="right-bottom-right">
            <a href="javascript:void(0)">
              <img src="./content2-banner4.jpg" alt="이미지4" />
            </a>
          </div> <!--right-bottom-right-->
        </div> <!--right-bottom-->
      </div> <!--right-->
    </div> <!--box-wrap-->
  </body>
</html>

필자가 첫번째 사진에 빨간색 박스를 그린 부분을 보면 공백이 생겨져 있다. 이건 참고로 margin도 padding도 아니다.
작성한 코드를 보면 margin과 padding도 초기화 해준 상태이다.

🙋🏻‍♀️ Question!
도대체 왜 이런 현상이 생긴 것일까?

🙆🏻‍♀️ Answer!
바로 해답은 CSS 속성 중 vertical-align과 inline태그에 있었다. 그럼 우리는 vertical-align이라는 속성과 inline태그를 알아볼 필요가 있겠다.

🎉 vertical-align 이란?

inline 또는 table-cell box에서의 수직 정렬을 지정하는 CSS 속성이다. mozila 웹페이지에는 vertical-align 속성은 두 컨텍스트에서 사용될 수 있다고 나온다.
참고링크

☝🏻 엘리먼트의 box를 이것이 포함된 line box 내부에서 수직 정렬하고자 할 때 쓰인다.
예를 들어서, <img> 엘리먼트를 텍스트 엘리먼트의 라인 속에서 정렬할 때 쓰일 수 있다.

✌🏻 ~~table의 한 셀에서 포함하고 있는 내용을 수직 정렬할 때 쓰인다. 두번째 내용은 이 게시물에서 다루지 않겠다.~~

📢주의!
vertical-align 속성은 block 레벨 엘리먼트에 사용할 수 없다.

👗 vertical-align 속성들

☝🏻 주로 부모 엘리먼트에 대하여 상대적으로 수직정렬 하는 값들

baseline
부모의 baseline에 맞추어 해당 엘리먼트의 baseline 을 정렬한다.
🔑열쇠1. vertical-align의 초기값은 baseline이다.

sub
해당 엘리먼트의 baseline을 부모의 subscript-baseline으로 정렬한다.

super
해당 엘리먼트의 baseline을 부모의 superscript-baseline으로 정렬한다.

text-top
해당 엘리먼트의 top을 부모 엘리먼트 폰트의 top으로 정렬한다.

text-bottom
해당 엘리먼트의 bottom을 부모 엘리먼트 폰트의 bottom으로 정렬한다.

middle
해당 엘리먼트의 middle을 부모의 baseline + x-height / 2 로 정렬한다.

length
해당 엘리먼트의 baseline을 부모의 baseline에서 주어진 길이만큼 위로 정렬한다.

percentage
length value와 마찬가지로 해당 엘리먼트의 baseline을 부모의 baseline에서 line-height의 퍼센트로 주어진 퍼센트만큼 위로 정렬한다.
length 와 percentage에 대해서 음수 값이 허용된다.

✌🏻 다음 두 value는 부모가 아닌 전체 라인에 대해서 수직정렬하는 값이다.

top
해당 엘리먼트의 top과 이것의 자손들의 top을 전체 라인의 top으로 정렬한다.

bottom
해당 엘리먼트의 bottom과 이것의 자손들의 bottom을 전체 라인의 bottom으로 정렬한다.

Baseline이 없는 엘리먼트에 대해서는 bottom margin edge가 baseline을 대신하여 사용된다.

🧦 inline 태그의 특징

흐름(=액체) / 옆으로 나열되다가 브라우저가 모자르면 줄바꿈이 된다.

width, height, padding-top, padding-bottom, margin-top, margin-bottom을 사용할수 없다.

<span>, <a>, <b>, <button>, <i>, <img>, <input>, <strong> 등의 태그가 있다.
🔑열쇠2.<img>태그는 inline속성을 가진 태그이다.

🔑열쇠1➕🔑열쇠2 를 참고해보면 왜 공백이 생기는지 슬슬 감이 오는가?

<img>태그가 inline속성을 가진것을 볼 수 있다.

<img>태그의 vertical-align은 디폴트값인 baseline으로 되있다.


<img>태그가 inline속성을 가진것을 볼 수 있다.


<img>태그의 vertical-align은 디폴트값인 baseline으로 되있다.

다시 본론으로 돌아와서 필자는 <div>안에 <img>태그를 넣었기 때문에 이미지가 부모인 <div>엘리먼트의 baseline에 맞추어 <img>도 baseline을 정렬한 것 이다.


그럼 '부드럽게 소금롤링' 이라는 이미지가 부모인 <div>엘리먼트의 baseline에 맞춰 정렬된다.그렇게 되면 <div>영역이 조금 남게 되는데 때문에 당연히 밑에 이미지들이 내려오는 것이다.