[HTML] inline-block의 여백

div를 가로정렬 하는 방법중 float, flex등이 있지만 inline-block을 사용하는 경우도 있다.

하지만 아래와 같이 여백이 생겨 원하는대로 나오지 않는다.

위와 같은 오류가 생기는 이유는

<div class="wrap1">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

이러한 코드의 엔터와 같은 공백을 인식하여 여백이 생기는 것이다.
문제해결방법은 2가지이다.

1. 공백없이 사용하기
   
   위와 같이 html코드를 공백없이 입력해주는 것이다.
   하지만 가독성이 떨어지므로 지양하는것이 좋다.

2. font-size
   
   font-size를 0으로 하여 공백을 없애는 방법이다.