CSS：如何消除文本前后的额外空白？

Question

4

这是一张图片：

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开发工具，结果发现：默认情况下，P标签的边距设置为200像素？！所以，我只需要将p的边距设置为自动即可。

- bnynn

什么滚动条？在Chrome中看起来很好：http://jsfiddle.net/Rz9hE/。我认为你实际页面上的一些其他样式可能会导致一些副作用，因为你发布的代码似乎在隔离环境中运行良好。 - aroth

是的，去掉填充和行高会消除滚动条，但我似乎无法摆脱“epic fail”和“you forgot”之间的巨大空间。 - bnynn

另外，请注意HTML属性及其值不应包含空格。<p class='Back'>Epic Fail</p> - Jason Barry

1

嗯，我可以借鉴你的“史诗级失败”想法，为我的IE8访问者服务… :P - Šime Vidas

你能否发布你自己的jsfiddle，这样我们就可以看一下？ - mwcz

3个回答

2

我用JSFiddle创建了您发布的代码的版本--请参见http://jsfiddle.net/RukbS/ 在我的JSFiddle中，我看不到您截图中下方的大片空白，所以我猜您运行的代码中有些内容是我们没有看到的。

如果没有真正看到您的代码运行情况，很难知道它与我创建的版本之间的区别，但从截图来看，“Epic Fail”段落似乎跨越了两行。

我唯一能够让我的测试复制这种情况的方法是在“Fail”单词后面立即放置<br><br>。我假设您没有这样做。

你可能想考虑从样式表中删除line-height属性。它并没有实现太多效果（因为它会由于字体大小自动选择该大小），这可能是导致你看到的问题的原因之一。如果你真的想在文本周围增加一些额外空间，可以使用padding或margin代替；这比使用line-height更容易控制。

你没有说明你正在使用哪个浏览器来显示此效果。有可能你只在某些浏览器中看到了某些东西。大多数现代浏览器都配备了良好的调试工具，可以帮助隔离此类问题。在Firefox中，你需要安装Firebug插件；在其他大多数现代浏览器中，开发者工具功能是内置的。

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

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

- Spudley

谢谢。我决定使用随Google Chrome附带的Web开发工具，结果发现：默认情况下，边距竟然被设置为200像素？！所以我只需要将p元素的边距设置为自动即可。 - bnynn

1

不确定你想要实现什么，但是下列这些组合可能导致多余的内容：

目前，你正在添加以下内容：

我在一个fiddle中尝试了你的当前代码，看起来运行良好（将滑块向左拖动以查看整个屏幕）

可能有其他 PHP 代码被插入了吗？

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

- Jason Gennaro

我找不到任何其他应用于p标签的样式会影响间距。我只指定了颜色和字体元素。 - bnynn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- connec · Accepted Answer

这是因为默认情况下，Chrome会对

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

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

在jsfiddle上看不到边距，因为他们使用了重置样式表，将p元素设为margin: 0。