<body>
  <div class="div--first">
  divタグで囲んだエリアその1
</div>
<div class="div--second">
  divタグで囲んだエリアその2
</div>
<span class="span--first">
  spanタグで囲んだエリアその1
</span>
<span class="span--second">
  spanタグで囲んだエリアその2
</span>
</body>
body{
  margin: 0;
  background: #f6f5f4;
  color: #1a1a1a;
}
.div--first{
  height: 50px;
  padding: 10px;
  background: #ff838b;
  color: #fff;
}
.div--second{
  height: 80px;
  padding: 10px;
  background: #6fb5ff;
  color: #fff;
}
.span--first{
  height: 50px;
  margin: 10px;
  background: #ffce5b;
}
.span--second{
  padding: 10px;
  background: #b3d874;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.