How to pad an image and text in the asp:Menu control

Question

I have an asp:Menu control that has four different menu items in it. Each menu item has a graphic and a text description.

<Items>
    <asp:MenuItem Text="New Authorization Form" Value="default.aspx" NavigateUrl="~/Default.aspx" ImageUrl="~/Images/TextPad.png"></asp:MenuItem>
    <asp:MenuItem Text="Manage My Forms" Value="myrequests.aspx" NavigateUrl="~/MyRequests.aspx" ImageUrl="~/Images/Pencil.png"></asp:MenuItem>
</Items>

My problem is the icon and text have no padding between them and it just looks ugly! Does anyone know how I can force a bit of padding between the image and text of the menu item? I've looked at all of the attributes on the asp:Menu control, but I haven't been able to find one for this, but I may have just missed it.

Answer 1

you could try creating a skin and then you could add a css class to and style it any way you want

Answer 2

I came up with an answer, but it's not what I was hoping for exactly. I added a style for img tags to my css like so:

img
{
    padding-right: 5px;
}

I'm still a little bummed that there are no attributes within the asp:Menu control that allow you to specify the padding between the image and menu item text.