display

block

⌨️ 문법

display: block;

• 줄바꿈이 들어가 혼자 한 줄 차지
• 대표적인 inline element : <div>, <p>, <h1> 태그

inline

⌨️ 문법

display: inline;

• 줄바꿈 없이 한 줄에 배치됨
• 대표적인 inline element : <span>, <a>, <em> 태그

inline-block

⌨️ 문법

display: inline-block;

• inline element와 같이 줄바꿈 없이 한 줄에 배치됨
• block element와 같이 width, height, margin, padding 속성의 크기 및 간격 지정이 가능
• 대표적인 inline element : <img>, <button>, <input>, <select> 태그