避免链接列表出现边距

在构建菜单或其他链接列表时，通常建议使用 `display: block;` 或 `display: inline-block;`，以便您可以增加链接目标的大小。简单的事实是：更大的链接目标更容易点击，并带来更好的用户体验。

让我们来看一个这样的简单链接列表

<ul>
   <li><a href="#">This little</a></li>
   <li><a href="#">piggy went to</a></li>
   <li><a href="#">market</a></li>
</ul>

没有任何 CSS 的情况下，列表项将是块级元素，而锚链接将是内联元素。因此，我们的链接目标仅限于文本本身的大小。

我们可以通过确保列表中的链接为块级元素来做得更好，这样它们就可以与它们的列表项父元素一样宽。

ul a { display: block; }

我们可以做得更好，方法是

1. 确保列表项没有内边距，但链接有
2. 不使用边距，因此没有不可点击的间隙

ul li { padding: 0; margin: 0; }
ul a { padding: 5px; display: block; }

今天的文章由相当明显的基金会、嗯，但我经常看到它的公司和个人烦恼合作社赞助。