[D+192] inline 과 inline-block

inline 과 inline-block 그리고 block는 요소를 나열하는 방법이다.

display: inline

대표적인 태그로는 span을 예로 들 수 있는데, text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.

• width/height 적용불가
• 가로나열
  ex) <span>, <a>, <img>, <em>, <i>, <strong>

display: block

block 속성은 무조건 한줄을 점유하고 있고, 다음 태그는 무조건 줄바꿈이 적용된다.

• 세로나열
  ex) <div>, <h1>, <p>, <li>, <section>

display: inline-block

inline-block 속성은 inline 속성의 특징과 block 속성의 특징 둘 다 가지고 있는 속성이다.
inline속성에서 할 수 없었던 width/height 변경 및 line-height를 적용할 수 있다.

• width/height 적용 가능
• 가로나열
  ex) <button>, <input>, <select>, <textarea>