html - 导航列表最后一项周围的空白/边距

Question

谁能指点我继承的网站。与原始代码相比，我更像是一个 SEO 人员，而且我在这方面没有取得任何进展。

看看http://www.edwardjackson.co.uk您会在左侧导航列表“家庭状况报告”的最后一项周围看到空白。

谁能告诉我这是什么原因造成的以及该如何处理？

我认为与 css 相关的部分是:

.nav li ul li a {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    text-decoration: none;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    font-size: 11px;
}
.nav li ul li a:hover {
    display: block;
    list-style-type: none;
    height: 18px;
    text-transform: uppercase;
    color: #504c40;
    margin-left: -80px;
    padding-left: 10px;
    background-image: none;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    text-decoration: underline;

非常感谢 - 邓克。

Answer 1

您所看到的实际上是正确数量的空白。问题是另一个 a 元素有两行文本，因此“溢出”了内容。

原因是.nav li ul li a元素上面有18px的高度，只比一行文字略大。如果将该样式更改为 height: auto;，则整个列表将保持一致。 (注意:该样式位于 style.css 样式表的第 699 行)。