Framing and Padding

<a> packs a solid punch when it comes to the world of web.

It can contain information and most of all it is a point of interaction.

You tap it, you click it, you do something to it and it responds.

So it is very important that links, buttons and any active area (clickable, draggable, or can be interacted with) on your web product (websites and webapps) is padded or has enough area to be easily interacted with.

How to pad elements? Simple. Add padding and dimensions (width and height).

Here’s an example:

See the Pen Padding by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Here’s another usage wherein the visual element is actually small but the active area is large enough for pointing devices. You may imagine this as a toolbar icon the size of an ant but the surrounding area is clickable.

See the Pen Padding and Framing by Brian Dys Sahagun (@BrianSahagun) on CodePen.

In the example above, you will notice in the CSS tab that I included Framing. Framing is simply wrapping an element in a <span> or <div> for the purpose of styling it independently from the surrounding elements.

Here’s another example of Framing and Padding a link with fixed dimensions:

See the Pen Padding with Fixed Dimensions by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Real World Example: Main Navigation

See the Pen Padding and Framing Example 1 by Brian Dys Sahagun (@BrianSahagun) on CodePen.

Real World Example: Toolbar

See the Pen Padding and Framing Example 1 by Brian Dys Sahagun (@BrianSahagun) on CodePen.