[HTML/CSS] 5. CSS Display

Mar 11, 2025

Contents

1. block


display: block;

폭을 모두 차지함

높이 지정 가능

2. inline


display: inline;

내부 요소의 크기만큼 크기를 가짐

높이, 넓이를 가지지 못함

3. inline-block


display: inline-block;

inline과 block의 성질을 모두 가짐

폭을 모두 차지하지 않음

높이와 폭을 지정할 수 있음

코드


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 5px;
      }
      .b1 {
        display: block;
        height: 200px;
      }
      .b2 {
        display: inline;
      }
      .b3 {
        display: inline-block;
        height: 200px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="b1">1</div>
    <hr />
    <div class="b2">2</div>
    <hr />
    <div class="b3">3</div>
  </body>
</html>

Contents

1. block 2. inline 3. inline-block 코드

HTML/CSS

[HTML/CSS] 5. CSS Display

최재원

Mar 11, 2025

Contents

1. block 2. inline 3. inline-block 코드

1. block


display: block;

폭을 모두 차지함

높이 지정 가능

2. inline


display: inline;

내부 요소의 크기만큼 크기를 가짐

높이, 넓이를 가지지 못함

3. inline-block


display: inline-block;

inline과 block의 성질을 모두 가짐

폭을 모두 차지하지 않음

높이와 폭을 지정할 수 있음

코드


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 5px;
      }
      .b1 {
        display: block;
        height: 200px;
      }
      .b2 {
        display: inline;
      }
      .b3 {
        display: inline-block;
        height: 200px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="b1">1</div>
    <hr />
    <div class="b2">2</div>
    <hr />
    <div class="b3">3</div>
  </body>
</html>

Contents

1. block 2. inline 3. inline-block 코드