css：如何在文本之前和之后摆脱这个额外的空格？

Question

这是一张图片：

HTML在php中，如下所示：

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

Back类的CSS和p如下：

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;
}

我正在使用最新版本的Google Chrome（很抱歉没有指定） 通过从登录div和行高删除填充来成功删除滚动条。但是，仍有空白区域，我已经彻底浏览了所有代码，看看我是否在p标签中添加了任何内容，但我找不到任何内容。有没有我可以上传所有代码的网站向你们展示？

结果：

谢谢大家，我决定使用谷歌浏览器附带的网络开发工具和IT TURNS OUT：MARGIN默认一些GOT设置为200PX ?? !!所以我只需要将p的余量设置为自动

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

不确定您要完成的是什么，但

的组合

1. padding在div和
上
2. extra line-height

可能导致过剩。

现在，你的添加

• 来自padding的50px（顶部和底部为25px）
• 来自line-height的50px（比font-size多50px）

---

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

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

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

或者您已将其他样式应用于p。

Answer 3

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

在我的JSFiddle中，我看不到屏幕截图中“Epic Fail”下面的大量空白空间，所以我猜你正在运行的代码中有一些你没有向我们展示过的东西。

在没有看到你的代码实际运行的情况下，很难知道它与我创建的版本之间有什么区别，但是看一下屏幕截图，看起来好像“Epic Fail”段落已经过去了两行。

我能让我的测试复制这个的唯一方法是在“失败”之后立即放置<br><br>。我假设你没有这样做。

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

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

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

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