display:block

• 무조건 한 줄을 점유하고 있다.
• 무조건 줄바꿈이 된다.
• 대표적인 tag는 div tag이다.

display:inline

• text 크기만큼만 공간을 점유한다.
• 줄바꿈을 하지 않는다.
• 대표적인 tag는 span tag이다.
• width / height 적용 불가하다.
• margin / padding의 top과 bottom을 control하지 못한다.
• line-height 자유롭게 사용 불가하다.

display:inline-block

• inline 속성, block 속성 모두 가지고 있다.
• inline 속성에서 width/height 적용 및 margin/padding의 top/bottom을 control 할 수 있다.
• line-height 적용 가능하다

주의 사항

• inline-block 사이 공백이 생기면 부모 tag에 font-size:0을 적용한다.
• inline-block 간 높이가 맞지 않을 때 상위 공백이 생기는데 vertical-align:top을 적용한다.