CSS 边距弄乱了空白——格式化的最佳方式？

Question

好的，所以我有下面的代码:

<ul class="noindent">
    <li class="indexlist"><p class="index">Brixham Town Centre</p></li>
    <li class="indexlist"><p class="index">Kingswear</p></li>
    <li class="indexlist"><p class="index">Paignton Bus Station</p></li>
    <li class="indexlist"><p class="index">South Devon College</p></li>
    <li class="indexlist"><p class="index">St Marychurch</p></li>
    <li class="indexlist"><p class="index">Torbay Hospital</p></li>
    <li class="indexlist"><p class="index">Torquay Town Centre</p></li>
    <li class="indexlist"><p class="index">The Willows</p></li>
</ul>

这是 CSS:

.indexlist {
    font-size: 20px;
    font-weight: 700;
    height: 60px;
    background: url(images/indexlistbg.gif) repeat-x;
    list-style-type: none;
    padding-left: 10px;
    padding-top: -15px;
    margin: 0;
}
.noindent {
    padding: 0;
}
p.index {
    padding-top: 15px;
}

您可以在以下位置查看正在运行的页面:http://new.mystoptorbay.co.uk/ .我不想要每个 li 下面的空白，但我可以看到 padding-top 属性把事情搞砸了。允许文本垂直居中 float 并且每个 li 之间没有空白的最佳方法是什么？

提前致谢。

Answer 1

错的不是内边距，而是边距。

p.index {
  padding-top: 15px;
  margin: 0; // remove margin
}

更好的是将文本垂直居中，使其高度为 60px，如下所示:

p.index {
  margin: 0;
  line-height: 60px;
}

问题是 p 元素有一些用户代理风格:

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;

它在前后添加 1em 的边距以区分段落。 p 标签应该在文本中使用，而在这种情况下，如果您需要链接，最好使用 spans 或 a。