Display | Notion

block 기본적으로 가로 영역을 모두 채움, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보임, 문단을 표시할 때 주로 사용 width, height 속성을 지정할 수 있음
inline 컨텐츠만큼 영역을 차지, 줄바꿈 되지 않음, width와 height를 지정할 수 없음
inline-block 요소는 inline인데 내부는 block처럼 표시함 inline처럼 콘텐츠 영역 만큼 차지하여 가로로 배치되지만 block처럼 내부 속성인 width와 height 변경 가능

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>display</title>
    <style>
      div,
      h2 {
        border: 1px solid lightcoral;
      }
      span,
      a {
        border: 1px solid lightcoral;
      }
      article > div,
      span {
        display: inline-block;
        width: 60px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <h1>Display Block</h1>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <h2>title</h2>

    <h1>Display Inline</h1>
    <div>content</div>
    <div>content</div>
    <a href="#">Naver</a>

    <article>
      <h1>Display Inline Block</h1>
      <div>content</div>
      <div>content</div>
      <div>content</div>
      <span>content</span>
      <span>content</span>
      <span>content</span>
    </article>
  </body>
</html>