CSS 边距变白 space - 最好的格式化方式？

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 下面的白色 space，但我可以看到 padding-top 属性把事情搞砸了。允许文本垂直居中浮动并且每个 li 之间没有白色 space 的最佳方法是什么？

提前致谢。

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。

Answer 2

删除规则 p.index{padding-top:15px;} 并在 .indexlist 规则中添加 overflow:auto;

Answer 3

问题是，你的P元素还有余量。只需将其重置为 0 即可。

p.index {
  margin: 0;
}

尝试使用 Chrome 中的元素检查器轻松修复这些 "bugs" https://developer.chrome.com/devtools/docs/dom-and-styles

CSS 边距变白 space - 最好的格式化方式？

CSS margins messing up white space - best way to format?

css

whitespace

margin

padding