move text down 8px

[herghost]

Hi all,

 

I have the below which basically makes a bordered box with curved borders. I wish to move the text in the topbox down by about 8px, however if I use padding-top then the image contained in the mainr starts 8px after it should, leaving a gap in my border

 

.topr
{
background: transparent url('../images/top.png') no-repeat ;
height:30px;
color:#000;
font-size:16px;
text-align:center;
}



.mainr
{

background: transparent url('../images/main.png') repeat-y;
line-height:12px;
color:#35bcfa;
font-size:10px;
vertical-align:middle;
padding-left:12px;
padding-right:6px;
padding-bottom:4px;

}

.bottomr
{
background: transparent url('../images/bottom.png') no-repeat;
height:35px;
color:#35bcfa;
padding-left:15px;
padding-top:1px;
}

 

How can I move it down? Thanks

 

[seanlim]

try putting your "topbox" text in a div and then set margin-top:8px for the div.