title: CSS confuse: Why people used to horizontal padding to link text?
body: <p>Recently I read some tutorial about how to make pure CSS drop-down menu:</p>
  
  <ul>
  <li><a href="http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu" rel="nofollow">http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu</a></li>
  <li><a href="http://designmodo.com/css3-dropdown-menu/" rel="nofollow">http://designmodo.com/css3-dropdown-menu/</a></li>
  <li><a href="http://red-team-design.com/css3-dropdown-menu/" rel="nofollow">http://red-team-design.com/css3-dropdown-menu/</a></li>
  </ul>
  
  <p>I found them when dealing with links in the <code>li</code> items, they used to add horizontal padding to the <code>&lt;a&gt;</code> element. </p>
  
  <p>Code like this:</p>
  
  <pre><code>li a {
      padding:0 20px;
  }
  </code></pre>
  
  <p>In my opinion, event without the padding, it won't effect the functionality or visual effect. The only reason adding the padding I guess is padding will make click area more bigger?</p>
  
  <p>Could someone explain about this?</p>