[CSS] block과 inline의 차이

❓display: block

• 한 줄을 차지하는 블록 수준 요소를 생성한다.
• 가로 폭 전체를 차지하며, 다른 요소가 옆에 위치할 수 없다.
• 새로운 줄에서 시작되며, width와 height 속성을 사용하여 가로 폭과 세로 높이를 조정할 수 있다.

예시: <div>, <p>, <h1> ~ <h6>, <section>

❓display: inline

• inline 값은 요소를 인라인 요소로 지정한다.
• 인라인 요소는 다른 인라인 요소나 텍스트와 같은 흐름에 따라 나란히 배치된다.
• 인라인 요소는 가로 공간에 맞게 크기가 결정되며, 너비와 높이를 지정할 수 없다.

예시로는 <span>, <a>, <strong>

❓display: inline-block

• block과 inline 요소의 중간 형태
• 내용에 따라 자동으로 크기가 조정되지만, 한 줄에 여러 요소가 옆으로 배치될 수 있다.
• 줄 바꿈되지 않고, 다른 inline 요소와 같은 줄에 배치될 수 있다.
• width와 height 속성을 사용하여 크기를 조정할 수 있으며, margin, padding 속성 등을 사용하여 요소 간의 간격을 조정할 수 있다.

예시: <span>, <img>, <button>

<h1>block</h1>
  <div style="display: block; background-color: yellow;">Block Element</div>
  <div style="display: block; background-color: cyan;">Block Element</div>

  <h1>lnline</h1>
  <span style="display: inline; background-color: yellow;">Inline Element</span>
  <span style="display: inline; background-color: cyan;">Inline Element</span>

  <h1>inline-block</h1>
  <span style="display: inline-block; width: 100px; height: 100px; background-color: yellow;">Inline Block Element</span>
  <span style="display: inline-block; width: 150px; height: 150px; background-color: cyan;">Inline Block Element</span>