박스 배열할 때 글자가 있는 박스와 비어있는 박스 배열이 맞춰지지 않는 경우
기본적으로 baseline을 글자의 하단부에 맞춰서 설정된다.
글자가 없을 경우 박스의 가장 아래 선을 맞춰 설정되다보니
코드는 순서대로 짜여있어도 배열이 뒤죽박죽으로 튀어나갈 수 있다.
<해결하기 위한 방법>
1. 글자를 동일하게 넣어주는 방법) 공백을 의미하는 글자요소를 HTML에 넣어주는 방법
<body>
<span class="test1">** **</span>
<span class="test2">2</span>
<span class="test3">1</span>
</body>- baseline을 맞춰주는 방법) css에 "vertical-align : bottom;"으로 설정하면 상자의 하단부를 동일하게 맞춰줄 수 있음 (baseline값으로 넣으면 글자 유무, 사이즈에 따라 박스가 제각각 움직일 수 있음)
pan {
display: inline-block;
vertical-align: bottom;
width: 100px;
height: 100px;
}
ɪ ʜᴏᴘᴇ ᴛᴏ sᴏʟᴠᴇ ʀᴇᴀʟ ᴘʀᴏʙʟᴇᴍs👩🏻💻❤️