CSS混淆：爲什麼人們習慣水平填充來鏈接文本？

Question

最近我讀到有關如何使純CSS下拉菜單中的一些教程：

• 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/

我發現他們有聯繫的li項時， ，他們習慣於將水平填充添加到<a>元素。

這樣的代碼：

li a { 
    padding:0 20px; 
} 

在我看來，一個事件，而不填充，它不會影響功能或視覺效果。添加填充的唯一原因是我認爲填充會使點擊區域更大？

有人可以解釋一下嗎？

Answer 1

刪除這些元素的填充將會對列表項上的視覺效果產生很大影響。

以第三個鏈接爲例，它使用嵌套列表，在另一個列表的<li>列表項中使用<ul>列表。

的<a>嵌套列表項中有以下填充規則：

padding: 10px;

這將創建文本週圍的空間，沒有它，列表中會顯得擁擠，簡單地說，unnatractive。

在主導航欄上，#menu a上有一個填充規則， padding: 0 25px;，我認爲這是您的原始問題。

拿走這條規則，你會發現一個巨大的變化。所有的列表項目都將顯示在彼此的旁邊，沒有間距，而不是很好地分開。正如你所提到的，你不需要在這裏使用填充，margin: 0 25px;會有相似的外觀，但是可點擊面積較小。

長（而且令人費解，很抱歉）回答，簡短的結論。 是的，你是正確的，因爲填充是不必要的，可以由另一個規則，如邊緣，但這會導致一個小得多的可點擊面積。對於用戶體驗的原因，填充方法在這裏是首選。 如果你錯了，恐怕是說填充對視覺風格沒有影響。在您最喜愛的瀏覽器開發工具或類似工具中進行瀏覽，當您禁用任何填充規則時，您會注意到巨大差異。

希望這可以幫助，我會很樂意回覆任何進一步的問題:)