Bild-Text Abstand ändern

[DeBing]

Hallo,
habe folgenden Code:

CSS-Datei:
.imgr {
 float:left;
 margin-right:20px;
 margin-bottom:10px;
 width:300px;
 height:300px;
}

XHTML-Datei:
<p>
   <a href="../bilder/bild.jpg" target="_blank">
      <img class="imgr" src="../bilder/bild.jpg" alt="..." />     </a>
   Text
</p>
//Bisher hab ich hier immer <br /> benutzt
<h2>
   Nächste Überschrift
</h2>

und dabei besteht folgendes Problem:
Das Bild schneidet in die Überschrift hinein. Von daher sollte der Abstand irgendwie reguliert werden. Bisher hab ich das immer mit recht vielen <br /> Tags gemacht aber es muss doch auch einen anderen Weg geben um den Abstand da zu regulieren und weniger Tags zu benutzen. Das Bild sollte aber schon so groß bleiben.

MfG
DeBing