htmlでblock要素は空要素でも、widthとheightが反映される。inline要素では反映されない。 #CSS

inline要素は何もしないと、widthやheightを指定しても反映されない。
以下のhtmlとcssでは、divが500px*500pxで表示されるが、spanは表示されない。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/app.css" media="all">
</head>
<body>
  <div id="red"></div>
  <span id="blue"></span>
</body>
</html>

app.css

#red{
  background-color: red;
  width: 500px;
  height: 500px;
}

#blue{
  background-color: blue;
  width: 500px;
  height: 500px;
}

ちなみに、display:inline-block;をspanに指定すると、表示される様になる。

app.css

#red{
  background-color: red;
  width: 500px;
  height: 500px;
}

#blue{
  background-color: blue;
  width: 500px;
  height: 500px;
  display:inline-block;
}