Padding for anchor tag | 易学教程

问题

I have a asp.net page with the code as shown below.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

  <!DOCTYPE html>

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style>
      body {
        margin: 0px;
      }
      header,
      footer {
        background-color: black;
        color: white;
        padding: 20px;
        text-align: center;
      }
      header {
        position: fixed;
        top: 0;
        width: 100%;
      }
      header li {
        display: inline-block;
        border: 1px solid rgb(0, 153, 255);
        background-color: dodgerblue;
      }
      header li:hover {
        background-color: white;
      }
      header a {
        text-decoration: none;
        color: white;
        padding: 15px;
      }
      header a:hover {
        color: dodgerblue;
      }
    </style>
  </head>

  <body>

    <form id="form1" runat="server">
      <div>
        <header runat="server">
          <h1>Welcome to SAIC</h1>
          <asp:Menu ID="MainMenu" runat="server" Orientation="Horizontal">
            <Items>
              <asp:MenuItem Value="Home" NavigateUrl="~/Home.aspx"></asp:MenuItem>
              <asp:MenuItem Value="Login" NavigateUrl="~/Login.aspx"></asp:MenuItem>
              <asp:MenuItem Value="Add Products" NavigateUrl="~/Add Products.aspx"></asp:MenuItem>
              <asp:MenuItem Value="View Product Details" NavigateUrl="~/View Product Details.aspx"></asp:MenuItem>
            </Items>
          </asp:Menu>
        </header>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
      </div>
      <footer>
        <p>Copyrights @ 2016</p>
      </footer>
    </form>
  </body>

  </html>

I've applied padding for anchor tag. But only padding-top and padding-bottom are being set. The padding of left and right are not appearing.

I've tried to set padding: 15px 15px 15px 15px; but that also doesn't work.

Here is the generated source. /* <![CDATA[ */ is being generated automatically. https://jsfiddle.net/q2Lcrgux/

回答1:

Anchor tag is an Inline element. Padding wont work with Inline Element. You have to make it as block element. Making them inline-block must work. http://jsfiddle.net/LinkinTED/4d7q6gwp/

<a href="#" style="display:block;padding:10px">Click here</a>

Style:

a
{
    display:inline-block;
}

回答2:

a{
 display:block;
 padding:15px;
 }//Use This Is inline Element That's Why You Need This Code Try It Once

回答3:

If displaying it as a block or inline-block doesn't work for you, then try putting a <p> tag in the anchor tag and add margin or padding to the <p> tag:

<a href="https//www.google.com"><p style="margin: 20px;"></p></a>

来源：https://stackoverflow.com/questions/38887042/padding-for-anchor-tag

标签

html

css

ASP.NET

padding