div 사이의 의도하지 않은 white space

https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements

Why is there an unexplainable gap between these inline-block div elements?

 

inline-block 의 두개의 div를 서로 horizontally 배열했을때 두 div 사이의 하얀 간격이 보인다.

 

<div class="top_left">
</div>
<div class="top_right">        
</div>

결과

왼쪽 파랑색이 top_left div, 오른쪽 초록색이 top_right div 이다.

두 div 모두 display 속성은 inline-block이다.

둘 사이에 흰색 간격이 있다.

이유는 

 

A typical characteristic of inline elements is that they respect the whitespace in the markup.

 

즉 inline-block은 markup 즉 html 코드 상에서 빈 공간을 존중한다.

코드 상에서 첫번째 div에서 개행하고 두 번째 div이 있기 때문에 이렇게 두 div 사이에 gap이 표시된 것이다. 

 

<div class="top_left"></div><div class="top_right"></div>

결과

위와 같이 두 div를 붙여 주면 사이의 간격이 없어진것을 볼 수 있다.