html - Reduce clickable area for link -


i have 1 word on page , each separate letter link. i'd reduce size of clickable area there no space surrounding letters. right it's fine on left , right of each letter, there space above , below each letter. included border around links 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;     }      {         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/

in addition programminginallston answer can add overflow hidden , widen box, :

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

although clip h, unfortunately.


Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -