How to increase the clickable area of a <a> tag button?

Question

I have learnt from this post that always use <a> tags or <button> tags to make button. Now I'm trying to use <a> tag. My question is: is there any way to increase the tag clickable area? Say I'm using <a> in a div box. I want the whole div box to become a button. Can I change the clicking area to the whole div box? Thanks for you help.

Answer 1

To increase the area of a text link you can use the following css;

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}

• Display: inline-block is required so that margins and padding can be set
• Position needs to be relative so that...
• z-index can be used to make the clickable area stay on top of any text that follows.
• The padding increases the area that can be clicked
• The negative margin keeps the flow of surrounding text as it should be (beware of over lapping links)