[css] display 속성 정리 block / inline / inline-block

📢 display 속성 정리 

🙌 CSS의 display 속성은 HTML 요소가 화면에 어떻게 렌더링될지를 결정하는 중요한 속성입니다. 이 속성을 이해하면 웹 페이지의 레이아웃을 효과적으로 설계할 수 있습니다.

📝 display: block 

✅  block에 해당하는 태그 

  <div>, <p>, <h1>~<h6>, <ul>, <ol>,  <li>, <table>, <blockquote>, <form>, <hr>, <figure>

✅ block 의 특징

✔ 기본 width값 : 100%, 지정하지 않으면 부모 요소의 너비를 전부 차지한다. 한 줄에 여러 태그를 표시할 수 없다.
✔ width, height 값을 가질 수 있다 
✔ 상하좌우 모든 margin 값을 가질 수 있다

📝 display: inline

✅  inline 에 해당하는 태그 

<img>, <br>, <span>, <sub> <input>, <label>, <a>, <button>, <b>, <s>, <i>

✅ inline 의 특징

✔ 기본 width값 : 컨텐츠 너비값, 한 줄에 여러 태그를 표시할 수 있다.
✔ width, height 값을 가질 수 없음, 같은 지정해도 무시됨
✔ 상하 margin값을 가질 수 없음

 

📝 display: inline-block 

✅ inline-block 의 특징

✔ 기본 width값 : 컨텐츠 너비값, 한 줄에 여러 태그를 표시할 수 있다.
✔ width, height 값을 가질 수 있음
✔ 상하 margin값을 가질 수 없음