<body>
  <div class="item1">ブロックレベル<br>横幅と高さが指定できる</div>
</body>

<hr>

<body>
  <span class="item1">インラインレベル<br>横幅と高さの指定出来ない</span>
</body>

<hr>

<body>
  <div class="item2">ブロックレベル<br>上下左右の余白指定可能</div>
</body>

<hr>

<body>
  <span class="item2">インライン要素上下の指定できない。</span>
</body>


<hr>

<body>
  <span class="item2">インライン要素上下の指定できない。display:blockを指定することで設定可能になる。</span>
</body>



hr {
  margin: 20px;
}

.item1 {
  height: 200px;
  width: 200px;
  background: pink;
}


.item2 {
  height: 200px;
  width: 200px;
  margin: 30px 40px;
  background: pink;
}




.item2 {
  display: block;
  height: 200px;
  width: 200px;
  margin: 30px 40px;
  background: pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.