Reduce clickable area for link

2019-07-13 12:14发布

站内问答 / HTML/CSS
1540 4 2

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/

4条回答
叛逆
2楼-- · 2019-07-13 12:38

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/

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
3楼-- · 2019-07-13 12:43

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.

查看更多
0人赞 添加讨论(0) 举报
趁早两清
4楼-- · 2019-07-13 12:47

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.

查看更多
0人赞 添加讨论(0) 举报
对你真心纯属浪费
5楼-- · 2019-07-13 12:58

Maybe this ?

    a {
        border: 1px solid black;
        display: block;
        padding-bottom:200px;
        height: 10px;
        width: 150px;
    }
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)