inline-block 사용시 공백 제거 방법
- 박스 사이 주석 기호 활용
- 부모태그에 font-size: 0px;
→ 여기 있는 공백들도 0이 되기 때문이다! 하지만, 따로 font-size 재설정 해야함
<div class="container" style="font-size: 0px">
</div>inline-block 박스 안에 글쓰면 이상함
- 왼쪽 박스에
vertical-align: top;(상하정렬: 위로정렬)
- inline 요소에만 적용 가능
vertical-align: top;- baseline이 옆에 존재하면 display: inline-block 요소들이
baseline 위에 오려고 함 - 그래서 vertical-align: top을 해서 위에 고정을 시켜야 함!!
display: inline-block
: 자기 크기 만큼 자리 차지함
공백 제거필요- 주변에 글이 있으면 이상함
→ vertical-align: top;
display: block (한 행을 전부 차지)
display: inline-block (내 크기만큼 차지)