박스 배열할 때 글자가 있는 박스와 비어있는 박스 배열이 맞춰지지 않는 경우
기본적으로 baseline을 글자의 하단부에 맞춰서 설정된다.
글자가 없을 경우 박스의 가장 아래 선을 맞춰 설정되다보니
코드는 순서대로 짜여있어도 배열이 뒤죽박죽으로 튀어나갈 수 있다.
<해결하기 위한 방법>
1. 글자를 동일하게 넣어주는 방법) 공백을 의미하는 글자요소를 HTML에 넣어주는 방법
<body>
<span class="test1">** **</span>
<span class="test2">2</span>
<span class="test3">1</span>
</body>
pan {
display: inline-block;
vertical-align: bottom;
width: 100px;
height: 100px;
}