<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    <!-- Block level -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <!--inline level-->
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </body>
</html>

div 는 대표적인 Block tag 이다.

span 은 대표적인 Inline tag 이다.

이 기본 값 은 CSS를 통해서 변경 가능하다.

div, span{
  width: 88px;
  height: 88px;
  margin: 28px;
}

div{
  background: red;
  display: inline-block;
}

span
{
  background:skyblue;
  display: block;
}

CSS 의 display를 통해서 div를 inline으로, span 을 block으로 바꿀 수 있다.

display들을 inline - block 하면 다음과 같이 나온다.

inline 하면

block 하면

inline 은 contents 자체만을 꾸며준다. 우리가 css에서 정의한 width나 height는 무시하고

contents크기에 맞춰서 변경된다.

inline block은 우리가 지정한 width와 height크기로 박스를 채우고 일렬로 채운다.

block은 한 줄에 상자 하나!