Button which looks like link

Question

Hi I have a requirement where I'm not allowed to use javascript on the page. I had some asp:LinkButtons but these appeared to use javascript so I replaced them with buttons:

<asp:Button ID="titleButton" runat="server" BorderStyle="None" CommandArgument='<%# Eval("Id") %>' OnClick="downloadButtonClick" Text="Download" CssClass="ButtonAsLink" />

with css:

.ButtonAsLink
{
  background-color:transparent;
  border:none;
  color:blue;
  cursor:pointer;
  text-decoration:underline;
  font-weight:bold
}

This works as I was wanting but the Text of the button does not line up with the labels in the same column due to the margins between the edge of the button and the text.

I'm wondering if anyone can tell me how to set the button text margin to zero?

Answer 1

.ButtonAsLink{
   background-color:transparent;
   border:none;
   color:blue;
   cursor:pointer;
   text-decoration:underline;
   font-weight:bold;
   padding: 0px;
 }

Set the element padding to 0px if you want to remove all padding or you can use the attribute like this.

padding: 0px 0px 0px 0px; 

Of course you can have any positive numerical value in place of zero. the orientation of the padding in this attribute as it relates to the numerical valuesis:

padding: top right bottom left

Last note: Margin is the spacing around an element and other elements around it. Padding is the spacing of the area within an element (e.g. text within a )

Answer 2

What about setting the margins and padding in your style?