HTMLで画像と文字が重なってしまう。

<div id="study_001">をまとまりとして、
<img>や下の<ul>との間に余白を作りたいのですが、
重なってしまいます。

divはブロック要素だと思うのですが、
spanのみを中身にもつdivは高さを持たないということでしょうか？

[HTML]

<img src="images/001_blue.png" alt="">

<div id="study_001">
<span id="margin">margin</span><span id="border">border</span><span id="padding">padding</span>
</div>

<ul>
  <li>HTMLとCSS</li>
  <li>要素</li>
  <li>margin｜border｜padding</li>
  <li>float</li>
  <!--...-->

[CSS]

img {
  width: 500px;
  margin: 0 20px;
  float: left;
}

#study_001{
  clear: left;
}

#margin{
  padding: 10px 50px;
  margin: 10px 0px 10px 20px;
  background: #f98;
}

#border{
  border-left: 3px #fff solid;
  padding: 10px 0px 10px 2px;
  background: #988;
  margin: 0;
}

#padding{
  background: #498;
  padding: 10px 50px;
}