css3 - CSS confuse: Why people used to horizontal padding to link text? -

recently read tutorial how make pure css drop-down menu:

• http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
• http://designmodo.com/css3-dropdown-menu/
• http://red-team-design.com/css3-dropdown-menu/

i found them when dealing links in li items, used add horizontal padding <a> element.

code this:

li {     padding:0 20px; } 

in opinion, event without padding, won't effect functionality or visual effect. reason adding padding guess padding make click area more bigger?

could explain this?

removing padding on elements have large effect on visual effect on list items in question.

taking 3rd link example, uses nested lists, <ul> list inside <li> list item of list.

the <a> inside nested list item has following padding rule:

padding: 10px;

this creates space around text, , without it, list cramped , put simply, unnatractive.

on main navigation bar, there padding rule on #menu a, padding: 0 25px;, assume original question about.

take away rule, , you'll notice massive change. list items appear right next each other no spacing, instead of nicely spaced out. mentioned, don't need use padding here, margin: 0 25px; have similar appearance, smaller clickable area.

long (and convoluted, sorry) answer, short conclusion. yes, right in padding unnecessary , replaced rule such margin, result in smaller clickable area. ux reasons, padding method preferred here. you're wrong, i'm afraid, saying padding has no effect on visual style. play around in favourite browser dev tools, or similar, , you'll notice massive difference when disable of padding rules.

hope helps, , i'll happy reply further questions :)