Float property is not working perfectly

Question

My float property is not working very well. The next element always leaves some space on the top.

My code is:

<img src="badimage.jpg" alt="bad image" style="width:80px; height:180px;float:left"><br><br>
<p>Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolorLoren ipsum dolorLoren ipsum dolor Loren ipsum dolor
Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolorLoren ipsum dolorLoren ipsum dolor Loren ipsum dolor
Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolorLoren ipsum dolorLoren ipsum dolor Loren ipsum dolor
Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolorLoren ipsum dolorLoren ipsum dolor Loren ipsum dolor
Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolorLoren ipsum dolorLoren ipsum dolor Loren ipsum dolor
Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolor Loren ipsum dolorLoren ipsum dolorLoren ipsum dolor Loren ipsum dolor
</p>

The text does not align with the top of the image. The text leave some space on the top. How can I solve this?

Answer 1

Have you tried removing the <br> tags? If I understood your problem correctly that would do the trick. Here you have a fiddle with the change.