元素或div之间的随机差距

Question

这里的元素之间出现了奇怪的差距。我宁愿让他们齐心协力。知道如何解决这个问题吗？

LINK

Answer 1

那是因为你没有为标签h1,p提供任何css。因此，浏览器正在添加默认保证金底部和顶部。所以，将其添加到css -

p, h1 { margin: 0 }

Answer 2

这是因为你没有设计那些由浏览器决定的元素。例如，Chrome决定在p元素上输入边距。

p { ...
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
... }

使用css reset文件，您将解决这个特定的问题，但是您将来作为Web开发人员可能会遇到很多类似情况。

Answer 3

这是其他人所说的保证金/填补问题。我建议如果你刚刚开始并且还没有养成任何习惯，那么总是要包含一个reset.css文件。这将消除所有浏览器默认值，并允许您重新开始。

Answer 4

内联元素的修复是：

vertical-align:top;

或

vertical-align:middle;

显示：块;

for images

Answer 5

我发现了我神秘的空白。

不要这样做：

echo "<div>
blah blah blah
</div>"

相反：

echo "<div>"
          ."blah blah blah"
     ."</div>";

只需清理您的空白代码即可。

Answer 6

我不太确定，你指的是哪种/ gap /，但是像margin这样的简单CSS规则：0;填充：0;可能会帮助你。

Answer 7

使用CSS重置文件是个好主意，就像你在YUI上找到的那样： http://developer.yahoo.com/yui/reset/

如果你最终使用YUI CSS重置，请确保在HTML标签上设置背景颜色，因为YUI的CSS重置将其变为白色。

html {
   background:black;
}
body {
    margin: 0px;
    font-family: helvetica;
    background: black;
}