CSS Layout - display:inline-block

display:inline과 비교하여 주된 차이는 display:inline-block은 너비와 높이 설정을 허용한다는 것이다.

또한 top bottom margin padding이 존중된다

display:block과의 주된 차이는 display:inline-block은 요소 다음에 줄 바꿈이 없다는 것이다. 그래서 다른 요소 옆에 위치할 수 있다.

아래 예시를 보면 inline은 요소가 나란하지만 높이 너비 패딩이 무시된다. inline-block이 적용된 span은 div 옆에 붙어있게 된다. 그리고 너비가 잘 적용되므로 창의 너비를 넘어섰기 때문에 줄바꿈이 있는 것처럼 보인다. width를 줄이면 높이가 적용된 span을 볼 수 있다. display:block은 너비 높이 패딩이 다 적용되지만 줄바꿈이 있다.

https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1

네비게이션 바를 생성하기 위해 inline-block 사용

display:inline-block은 list item을 수평적으로 만들기 위해 흔히 쓰인다.

li 요소는 수직적으로 위치한다. 그래서 inline-block으로 너비 높이 패딩 등의 값이 적용되게 하면서 수평적으로 만든다.

https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_nav

https://www.w3schools.com/css/css_inline-block.asp