是什么原因造成的，如何摆脱网页上的这条奇怪的白线？答案

【问题标题】：What is causing, and how do I get rid of this wierd white line on my web page?是什么原因造成的，如何摆脱网页上的这条奇怪的白线？
【发布时间】：2016-11-19 06:07:36
【问题描述】：

我无法摆脱我正在构建的网页上的这个空白区域。它发生在我的 Header 和 Navbar div 之间。我创建了另一个 ASP.NET 网站并发生了同样的事情。请告诉我是什么导致了这个空白以及如何删除它。

谢谢！

代码：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MainSite.Master.cs" Inherits="EndophthalmitisDatabase.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Endophthalmitis Database</title>
    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>
    <style>
        html,body {
            margin: 0px;
            padding: 0px;
        }

        div#header {
            background: #e00;
            height: 50px;
            width: auto;
            border-bottom: solid;
            border-bottom-color: #b00;
            font-family: Arial;
            font-size: 50px;
            color: #eee;
            padding: 25px;
            overflow: auto;
            margin: 0px;
        }

        div#navBar {
            background: #ddd;
            height: 35px;
            width: auto;
            border-bottom: solid;
            border-bottom-color: #ccc;
            font-family: Arial;
            font-size: 16px;
            margin: 0px;
        }

        div#navBar ul {
            list-style: none;
            list-style-type: none;
            background-color: #ddd;
        }

        div#navBar ul li {
            display:inline;
        }

        div#navBar ul li a {
            padding:.3em;
            text-decoration: none;
            color: #900;
        }

        div#navBar ul li a:hover{
            background-color: #e00;
            color: #fff;
        }

        div#contentDiv {
            overflow:auto;
            width: 1000px;
            height: auto;
            background-color: #eee;
            border-left: 2px;
            border-left-color: #000;
            border-right: 2px;
            border-right-color: #000;
            border-bottom: 2px;
            border-bottom-color: #000;
        }
    </style>
</head>
<body>
    <div id="header">
        Endophthalmitis Database
    </div>
    <div id ="navBar">
        <ul>
            <li><a href ="Default.aspx">Home</a></li>
            <li><a href ="DataEntry.aspx">Enter Data</a></li>
            <li><a href ="Reports.aspx">Reports</a></li>
            <li><a href ="Contact.aspx">Contact</a></li>
        </ul>
    </div>
    <div id ="contentDiv">
        <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="mainContent" runat="server">

            </asp:ContentPlaceHolder>
        </div>
        </form>
    </div>
</body>
</html>

图片：

【问题讨论】：

标签： css asp.net html visual-studio web

【解决方案1】：

您的 ul 项目正在向顶部添加边距。

ul {margin-top:-10px }

（或者任何可以拉起 ul 的东西......

【讨论】：

【解决方案2】：

您需要移除 UL 上的填充和边距。这些设置是由浏览器添加的，如果您没有使用任何 CSS 重置，则需要手动删除它们。

在我添加的 CSS 中

margin: 0;
padding: 0;

到div#navBar ul 规则

这会导致您的布局出现其他较小的样式问题，您可以轻松解决这些问题，但这解决了您的确切问题。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Endophthalmitis Database</title>
    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>
    <style>
        html,body {
            margin: 0px;
            padding: 0px;
        }

        div#header {
            background: #e00;
            height: 50px;
            width: auto;
            border-bottom: solid;
            border-bottom-color: #b00;
            font-family: Arial;
            font-size: 50px;
            color: #eee;
            padding: 25px;
            overflow: auto;
            margin: 0px;
        }

        div#navBar {
            background: #ddd;
            height: 35px;
            width: auto;
            border-bottom: solid;
            border-bottom-color: #ccc;
            font-family: Arial;
            font-size: 16px;
            margin: 0px;
        }

        div#navBar ul {
            margin: 0;
            padding:0;
            list-style: none;
            list-style-type: none;
            background-color: #ddd;
        }

        div#navBar ul li {
            display:inline;
        }

        div#navBar ul li a {
            padding:.3em;
            text-decoration: none;
            color: #900;
        }

        div#navBar ul li a:hover{
            background-color: #e00;
            color: #fff;
        }

        div#contentDiv {
            overflow:auto;
            width: 1000px;
            height: auto;
            background-color: #eee;
            border-left: 2px;
            border-left-color: #000;
            border-right: 2px;
            border-right-color: #000;
            border-bottom: 2px;
            border-bottom-color: #000;
        }
    </style>
</head>
<body>
    <div id="header">
        Endophthalmitis Database
    </div>
    <div id ="navBar">
        <ul>
            <li><a href ="Default.aspx">Home</a></li>
            <li><a href ="DataEntry.aspx">Enter Data</a></li>
            <li><a href ="Reports.aspx">Reports</a></li>
            <li><a href ="Contact.aspx">Contact</a></li>
        </ul>
    </div>
    <div id ="contentDiv">
        <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="mainContent" runat="server">

            </asp:ContentPlaceHolder>
        </div>
        </form>
    </div>
</body>
</html>

【讨论】：

如果不使用任何CSS重置，将顶部的html, body选择器更改为*不是更好的解决方案吗？
我会说不。可能有很多我想要的地方，不希望，元素的默认填充/边距。这就是为什么大多数重置会在特定元素（ul、li 等）上显式设置这些值而不使用 *（它将样式应用于所有不知道的元素）。