CSS边距弄乱了空白-最好的格式化方式？答案

【问题标题】：CSS margins messing up white space - best way to format?CSS边距弄乱了空白-最好的格式化方式？
【发布时间】：2015-04-23 05:33:19
【问题描述】：

好的，所以我有以下代码：

<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 属性把事情搞砸了。让文本垂直居中浮动并且每个 li 之间没有空格的最佳方法是什么？

提前致谢。

【问题讨论】：

标签： css whitespace margin padding

【解决方案1】：

不是填充弄乱了，而是边距弄乱了。

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

将文本垂直居中更好，使其高度为 60 像素，如下所示：

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

问题在于p 元素有一些用户代理风格：

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

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

【讨论】：

谢谢！这行得通 - 我不太清楚具体是怎么做的，但谢谢你:)
@Elliot，您可以将答案标记为已接受 :) 我添加了一些细节来解释它发生的原因。

【解决方案2】：

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

【讨论】：

不是真正的“正确”解决方案。只是“隐藏”应该以这种方式重置的间距。它可能会导致更多的错误和其他错误。

【解决方案3】：

问题是，你的 P 元素仍然有边距。只需将其重置为 0 即可。

p.index {
  margin: 0;
}

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

【讨论】：