display : 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>