Question

我正在使用这个线框：

http://problemio.com/problemionewest.pdf

在右侧有一个类别列表。我使用

标签在这里制作了它们：http://www.problemio.com，如下所示：

<p style="color: #2e6ea4;"><strong>Environment</strong></p>
        <p style="color: #B77F37; padding-left: 80px;"><strong>Homelessness</strong></p>
        <p style="color: gray; margin-left: 20px;"><strong>HealthCare</strong></p>
        <p style="color: #2e6ea4; padding-left: 80px;"><strong>Business</strong></p>
        <p style="color: #B77F37; padding-left: 120px;"><strong>Relationships</strong></p>
        <p style="color: gray; padding-left: 80px;"><strong>Philosophy</strong></p>                     
        <p style="color: #2e6ea4; padding-left: 20px;"><strong>Social Issues</strong></p>
        <p style="color: #B77F37; padding-left: 100px;"><strong>Technology</strong></p>
        <p style="color: gray; padding-left: 50px;"><strong>Finance</strong></p>
        <p style="color: #2e6ea4; padding-left: 130px;"><strong>Real Estate</strong></p>

但是它们之间的空间太大了。有没有办法减少它们之间的垂直空间？

谢谢！

Answer 1

首先，请注意：内联CSS是一个糟糕的主意。请继续阅读。

简短回答：您需要使用CSS调整段落的margin属性。在<header>标记之间添加：

<style type="text/css">
p {
   margin: 5px 0;
}
</style>

将5px更改为所需的边距高度。请注意，将更改文档中所有段落的边距。为了避免这种情况，您需要为段落的父元素指定一个id并引用它：

<div id="sidebar">
    <p>Social</p>
    // etc...
</div>

然后修改你的CSS：

<style type="text/css">
#sidebar p {
   margin: 5px 0;
}
</style>

Long Rant：

实际上，这不是你应该采取的方法。定义内联或文档样式会使维护和更改成为一场噩梦，并且会失去一致性。

Using external stylesheets可以更轻松，更快速地编辑和维护您的网站样式和设计。你也保持一致。

这里有很多内容，你可以在自己的时间谷歌这个主题。但是你应该考虑链接一个外部样式表并在那里定义你的样式。

查看Bootsrap framework.

Answer 2

@Mohamad建议margin可能是一个问题。它也可能是line-height。

p
{
    line-height: 10px; //Or some other value to adjust
}

如何使<p>标签之间的垂直空间变小？</p>

2 个答案:

Long Rant：