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;
}