WH

Sprites and Link Padding

Sprites are often used to stylize 'a' tags. When a sprite sheet is used, a fixed width and height is used to specific the image on the sprite.

Here is a common example of how a sprite is commonly used

/* Simple Sprite Css */

#Square {
  background: url(sprite-test.png);
}

#Square {
  background-position: -19px -21px;
  width: 78px;
  height: 78px;
}

a {
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  display: block;
}

<!-- A link for the Sprite -->

<a href="#" id="Square">A link</a>

In this example, the referenced image on the sprite is sufficiently large to allow for easy clicking. There are however times this is not the case.

In other cases, padding is needed for the sprite image link to promote a greater clicking region for accessibility. To achieve this, the markup must be changed such that the 'a' tag will have a 'span' and the id from the 'a' tag is placed on the 'span tag'.

<!-- Span in Link -->

<a href="#"><span id="Square">A link</span></a>

/*  More Padding for Links */

span {
  display: block;
}

a {
  padding: 2em;
}

The span carries the image and the 'a' tag is now an expandable wrapper of 'clickability'.

Offline Demo