css：如何在文本前后去除多余的空白？

Question

这是一张图片：

HTML 在 php 中，如下所示：

print "<p class = 'Back'>Epic Fail</p>";
print "<p>You forgot to put in your Username or Password.</p>";

Back 类和 p 的 CSS 如下：

p.Back
{
font-size: 200px;
display: block;
text-align: left;
font-style: oblique;
}
p
{
font-size: 20px;
color: #292421;
font-family: Times;
}

这一切都包裹在一个 div 标签中，它有大约 25px 的内边距，为什么会有这么多的空白？这是一个问题，因为它创建了一个我不想要的滚动条，而且看起来不太好。

编辑： 这是 div：

#login
{
background: #E0DFDB;
width: 1200px;
margin: auto;
}

我使用的是最新版本的谷歌浏览器（抱歉未指定） 通过从登录 div 和 line-height 中删除填充，成功删除了滚动条。但是，仍然有空白，我已经彻底浏览了所有代码，看看我是否在 p 标签中添加了任何东西，但我找不到任何东西。有没有一个网站可以上传我所有的代码给你们看？

结果：

谢谢大家，我决定使用谷歌浏览器附带的网络开发工具，结果显示：默认边距设置为 200PX？？！！所以我所要做的就是将 p 的边距设置为 auto

Answer 1

这是因为默认情况下，Chrome 将-webkit-margin-before: 1em; -webkit-margin-after: 1em 样式应用于p 元素。在您的示例中，这将在元素上方和下方创建一个 200px 边距。设置 margin: auto 或任何其他 margin 值会覆盖此默认值。

其他浏览器以不同方式将默认边距应用于p 元素：例如Firefox 应用 margin: 1em 0 会产生相同的效果。

边距没有出现在 jsfiddle 上，因为它们使用了一个重置​​样式表，该样式表提供了 p 元素 margin: 0。

Answer 2

我已经创建了您发布的代码的 JSFiddle 版本 -- 请参阅 http://jsfiddle.net/RukbS/

在我的 JSFiddle 中，我看不到屏幕截图中“Epic Fail”下方的巨大空白区域，所以我猜您正在运行的代码中有一些您没有向我们展示的内容。

没有看到你的代码实际运行，很难知道它和我创建的版本之间有什么区别，但是看截图，看起来就像“史诗失败”段落已经结束了两行。

我可以让我的测试复制这一点的唯一方法是将<br><br> 紧跟在“失败”一词之后。我假设你没有这样做。

您可能需要考虑从样式表中删除line-height 属性。它并没有真正取得多大成就（因为它无论如何都会因为字体大小而获得那个大小），并且可能会导致您所看到的内容。如果您确实需要在文本周围留出一点额外空间，请改用padding 或margin；比line-height更容易控制。

您没有说明您使用的浏览器显示了这种效果。您可能会看到仅在某些浏览器中显示的内容。如今，大多数浏览器都带有一个很好的调试工具，可以帮助隔离此类问题。在 Firefox 中，您需要安装 Firebug 插件；在大多数其他现代浏览器中，都内置了开发者工具功能。

打开 Firebug/Dev Tools 窗口，并使用它找到“Epic Fail”元素。它将允许您检查元素的大小和形状，以及应用于它的样式。这几乎肯定会为您提供找出问题所在所需的信息。

我知道我没有给你一个直接解决问题的答案，但我希望我在这里指出的一些事情能够引导你找到问题的正确方向。

Answer 3

不确定你要完成什么，但结合

1. padding 上 div 和
2. 额外的line-height

可能会导致过量。

现在，你的添加

• 50px from padding（上下各25px）
• 50px from line-height（比font-size多了50px）

---

我在小提琴中尝试了您当前的代码，它似乎工作正常（将栏拖到左侧以查看整个屏幕）

http://jsfiddle.net/jasongennaro/aNRhN/

也许还有其他代码被 PHP 插入？

或者您对p 应用了其他样式。