<p class="block1">これはブロックレベル要素です</p>
<p class="block2">これはブロックレベル要素です</p>
<p class="block3">これはブロックレベル要素です</p>
* {
  margin: 0;   /* 初期化 */
  padding: 0;  /* 初期化 */
}

.block1 {
  background-color: red;
  width: 100px;
  height:100px;
  padding: 20px;
  margin-bottom: 20px;
}
.block2 {
  background-color: gray;
  width: 100px;
  height:100px;
  padding: 20px;
  margin-bottom: 20px;
}
.block3 {
  width: 100px;
  height:100px;
  background-color: blue;
  padding: 20px;
  margin-bottom: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.