[HTML/CSS] 3. CSS Display

김건우

Mar 07, 2025

Contents

1. inline과 line-block의 차이 2. block과 inline-block의 차이

💡

block

inline

inline-block

1. inline과 line-block의 차이

'display:inline'과 'display:inline-block'의 차이점은 'display:inline-block'은 너비(width)와 높이(height)를 설정할 수 있다는 것입니다.

2. block과 inline-block의 차이

'display:block'과 'display:inline-block'의 차이점은 'display:inline-block'은 뒤에 오면 요소가 줄 바꿈을 하지 않는 다는 것입니다. 그래서 요소 바로 옆에 다른 요소를 배치시킬 수 있습니다.


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 10px;
      }

      .b1 {
        display: block;
        height: 200px;
      }

      .b2 {
        display: inline;
      }

      .b3 {
        display: inline-block;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="b1">1</div>
    <hr />
    <div class="b2">2</div>
    <hr />
    <div class="b3">3</div>
  </body>
</html>