CSS+<p>+<div />

[Beni]

hallo leute!
ich möchte Folgendes bewerkstelligen:

Ich habe eine Textbox variabler Größe.
Das Textfeld ist grau hinterlegt und soll am oberen und unteren Ende mit punkten begrenzt werden. Die punkte haben besonderes Aussehen und kommen aus einem .GIF.

Ich habe es im moment so realisiert:
HTML:
<div class="dotline" />
   <p class="textbox">
      foo
      bla blubb
   </p>
<div class="dotline" />

CSS:
/**
* Gepunktete Linie im div-container
**/
div.dotline{
   margin-top:0px;
   padding-top:0px;
   padding-bottom:1px;
   background-image:url(pics/punkte.gif);
   background-repeat:repeat-x;
}

/**
* Normaler schwarzer Text, eingerückt
**/
p.textbox {
   margin-top:0px;
   margin-bottom:0px;
   margin-left:10px;

font-family: arial, helvetica, sans-serif;
   font-size: 12px;
   color: #ff0000;
   font-weight: normal;

border-width:0px;

background-color: #f8f8f8;
}

Okay, so weit so gut.
ich möchte nun aber erreichen, dass immer vor dem Textfeld ein kleiner Zwischenraum ist.
Zweckmässig wäre es, wenn ich die divs einfach in den <p> teil übernemen könnte, was aber aus irgendeinem grund dann nicht mehr interpretiert wird (der Textabschnitt hat dann keine Formatierung mehr)

Habe ich da was übersehen / nicht bedacht?
wie könnte ich das lösen, möglichst so, dass ich nur noch sagen muss
<p class="textbox">
blubbbla
</p>
und die linien sind automatisch da?