{ display: inline; }

대표적으로 이라는 태그의 성질로 content/text 크기만큼만 점유하고
동일 라인에 붙는 성질.

'이 글씨는 두꺼운 효과를 주었다.'와 같이 text 내에 특정 부분에만 스타일을 간단히 줄때 많이 사용된다.

**- width/height 적용 불가

• margin/padding-top/bottom 적용 불가
• line-height 원하는 대로 적용 불가(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)**

{ display: block; }

반면 block은 무조건 한줄을 점유하고, 다음 태그는 다음 줄로 간다.

{ display: inline-block; }

2개의 결합이다. 제일 중요한 성질 자체는 inline과 비슷하다.
동일 라인에 여러 태그를 붙일 때 쓸 수 있다.
다만 위 inline의 단점들을 커버하는 것이 inline-block

• width/height 적용 가능
• margin/padding-top/bottom 적용 가능
• line-height 적용 가능

다만 고려해야 할 것이 있다.

• inline-block 끼리 공백이 생기게 되는데, 이때는 상위 div에 { font-size: 0; } 를 적용하면 해결
• inline-block 끼리 높이가 안맞을시 상위 공백이 생기는데, 이때는 { vertical-align: ---; } 값으로 top 등을 줘서 맞춰주면된다.

그래서 결론은?

그렇다면 무조건 inline-block 쓰는게 낫지 않을까?

디테일한 보정이 필요하고 예민한 사람들은 inline-block 쓰는것이 낫고,
text 내의 특정 부분 스타일 등 간단한 것들은 그냥 inline 쓰면 된다.

inline 쓴다는 것은 을 그냥 쓰는 것을 뜻하고(default 값이기 때문에), inline-block은 따로 div 등에 display: inline-block 속성 코드를 타이핑하고 여타 속성에 신경을 써줘야한다는 것을 뜻한다.