Question

为什么此代码会在google chrome的页面顶部留下白色条带？

 <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>title goes here</title>
</head>

<body style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px">
<form id="form1" runat="server" style="padding:0px 0px 0px 0px;margin:0px 0px 0px 0px">
        <div style="background-color: blue;">
            <p>&nbsp</p>
        </div>
    </form>
    <p>&nbsp;</p>
</body>
</html>

Answer 1

p-tag有一个影响其父母的余量。

将overflow: auto;添加到具有背景的div中。这会阻止collapsing

的边距

Answer 2

将margin:0; padding:0;提供给DIV内的<p>。

Answer 3

尝试将margin:0;和padding=0;添加到html元素。

此外，这有点牵强，但我遇到了类似的php文件问题，其中utf-8编码一个 BOM将在其他所有内容之前创建一个空行。

Answer 4

白线来自p标签创建的换行符留下的空白区域。只需删除p标签，它就会消失。

    <div style="background-color: blue;">
           &nbsp
    </div>

顶部的白色边框

4 个答案: