[CSS] display (inline, inline-block, block) / 차이점

🔗 CSS에서 display란?

 

 요소를 어떻게 보여줄지 선택하는 CSS 속성이다.

 

---

 

display: inline; => width, height 지정할 수 X

 

 요소를 inline으로 표시한다.

 

 

<span>, <a>, <input>, <label>, <button>, <textarea>, <img> 등

display: inline-block; => width, height 지정할 수 O

 

 요소는 inline이지만, 내부는 block으로 표시한다.

 

 

 

 

display: block; => width, height 지정할 수 O / width 100%

 

 요소를 block으로 표시한다. 따라서 요소 앞 뒤로 줄바꿈 된다.

 

 

<div>, <h#>, <ul>, <ol>, <dl>, <li>, <form>, <table>, <p>, <video>, <address> 등

---

💡 같이 보면 좋을 Post

[CSS] 왕초보를 위한 font / background / border 속성 총정리