Reduce clickable area for link

问题

I have one word on a page and each separate letter is a link. I'd like to reduce the size of the clickable area so that there is no space surrounding the letters. Right now it's fine on the left and right of each letter, but there is too much space above and below each letter. I included a border around the links for illustrative purposes (see fiddle below).

Any ideas on how?

HTML:

<body>
  <div>
    <h1><a href=#>H</a></h1>
    <h1><a href=#>E</a></h1>
    <h1><a href=#>L</a></h1>
    <h1><a href=#>L</a></h1>
    <h1><a href=#>O</a></h1>
  </div>
</body>

CSS:

    body {
        font-family: 'Sigmar One', cursive;
        font-size: 100px;
        color: white;
        text-shadow: 4px 4px 4px #000;

        background-color:blue;

        width: 100%;
        height: 100%;
        margin: 0;
    }

    a {
        border: 1px solid black;
    }

    div {
        position:absolute; 
        height:100%; 
        width:100%;
        display: table;
    }

    h1 {
        display: table-cell;
        vertical-align: middle;
        text-align:center;
    }

    a:visited, a:active {
        text-decoration: none;
        color: white;
    }

    a:link {
        text-decoration: none;
        color: white;
        text-shadow: 0px 2px 3px rgba(255,255,255,.25);
        -webkit-background-clip: text;
           -moz-background-clip: text;
                background-clip: text;
    }

    a:hover {
        text-shadow: 4px 4px 4px #000;
        color: white;
    }

FIDDLE: http://jsfiddle.net/8Huu7/10/

回答1:

In addition to programminginallston answer you can also add overflow hidden and widen the box, so :

a {
  display: inline-block;
  line-height: 1em;
  overflow: hidden;
  width: 180px;
}

Although that does clip the H, unfortunately.

回答2:

update your a tag css to include

a {
    display: inline-block;
    line-height: 1em;
}

You need to change the display so that you can work with the box of the element like it is a block, while still allowing it to move inline with the text. You then change the line-height to be only the height of the text. Browsers typically add a greater line-height for readability.

Here is the updated jsfiddle: http://jsfiddle.net/QSL6T/

回答3:

This happens because there is reserved space for diacritics. If you wanted to show Á or Ç, for instance, there would be no extra space.

A possible workaround is to define margin-top to your text and overflow: hidden to your container. Here's an example fiddle.

回答4:

Maybe this ?

    a {
        border: 1px solid black;
        display: block;
        padding-bottom:200px;
        height: 10px;
        width: 150px;
    }

来源：https://stackoverflow.com/questions/18197619/reduce-clickable-area-for-link

标签

html

css

hyperlink

resize