Reduce clickable area for link
Question
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 answers
solution1
5 ACCPTED 2013-08-12 22:38:03
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.
solution2
1 2013-08-12 22:29:02
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/
solution3
1 2013-08-12 22:48:04
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 .
solution4
-1 2013-08-12 22:58:53
Maybe this ?
a {
border: 1px solid black;
display: block;
padding-bottom:200px;
height: 10px;
width: 150px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.