상기와 같이 display를 inline 및 inlinde-block으로 했을경우 생기는 공백 이유와 없애는 방법을 알아보자

  <div id="container">
    <div class="itme">1</div>
    <div class="itme">2</div>
    <div class="itme">3</div>
  </div>

이유

우리는 엔터가 들어간 부분에 아무런 문자가 없다고 생각하지만, 실제로는 줄바꿈 문자가 들어가 있다
CSS는 이러한 줄바꿈 문자를 공백 문자와 동일하게 처리한다

코드에 줄바꿈이 있으면,
출력결과에서 span 또는 div(display를 inline또는 inline-block) 요소들 사이에 공백문자를 하나 집어 넣어서 표시하는 것이다
이것이 inline과 inline-block 요소들 사이에 공백이 생기는지에 대한 이유다

display가 block인 경우에는 공백문자를 표시 하지 않는다

해결

• 부모요소 글자 크기를 0으로 만듬
• flex이용
• float 이용
• table 이용