inline / inline-block / block 차이

css의 display property에는 많은 종류의 value가 있지만,
그 중 inline vs. inline-block vs. block에 대해 비교해보고자 한다.

1. display: inline
   • 태그 안의 글자 길이만큼의 영역만 화면에 표시한다.
   • inline을 default값으로 가지고 있는 tag: <span>, <a>, <img>, <em>, <i>, <strong>,
   • width, height 속성에 영향을 받지 않는다

2. display: inline-block

   • inline과 같이 양 옆으로 화면에 나열할 수 있다.
   • inline과 다른점은 width, height 속성을 통해 사이즈 조절이 가능하다.
   • inline-block을 default값으로 가지고 있는 tag: <button>, <input>, <select>, <textarea>

3. display: block

   • inline과 달리, 새로운 줄로 시작하며 해당 줄의 가로를 다 차지한다.
   • block을 default값으로 가지고 있는 tag: <div>, <h1>, <p>, <li>, <section>