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

这些都被封装在一个大约有25px填充的div标签中，为什么会有这么多空格？这是一个问题，因为它创建了一个我不想要的滚动条，而且看起来不是很好。

编辑:这是div：

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

我使用的是最新版本的Google Chrome (很抱歉没有详细说明)滚动条是通过从登录div和行高中删除填充而成功删除的。但是，仍然有空格，我已经彻底检查了所有代码，以查看是否向p标记添加了任何内容，但我找不到任何内容。有没有一个网站可以让我上传我所有的代码给你们看？

结果：

感谢各位，我决定使用google chrome自带的web开发工具，结果发现:默认情况下，边距设置为200PX??!！所以我所要做的就是将p的边距设置为auto

Answer 1

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

其他浏览器以不同的方式将默认边距应用于p元素:例如，火狐应用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

不确定您想要实现的目标，但是

div和

• extra line-height

上的

1. padding

可能是导致过量的原因。

现在，你添加的

来自padding的

• 50px (顶部和底部为25px)来自line-height的
• 50px (比font-size)

大50px

我在小提琴中尝试了你当前的代码，它似乎工作得很好(将条拖到左边可以看到整个屏幕)

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

也许PHP中还插入了其他代码？

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