CSS：删除顶部的空白（已经重置边距/填充）答案

【问题标题】：CSS: Remove whitespace at top(already made reset margin/padding)CSS：删除顶部的空白（已经重置边距/填充）
【发布时间】：2016-03-22 01:21:12
【问题描述】：

我很难弄清楚为什么我的 html 文件顶部有大约 10 像素的空白。在 CSS 中，我在“body”中设置了边距和填充 0，但它仍然存在。有什么帮助吗？谢谢！

更新：所以我发现删除顶部的 !doctype html 会使用 google chrome 浏览器删除空格，但不会使用 firefox。但是根据我的研究，你需要 !doctype html 来告诉浏览器它是 html5，所以我不知道从哪里开始。

<!doctype html>
<html>
<head>
    <title>Personal WebSite</title>


    <style>

    html body{
        margin:0;
        padding:0;
    }


     #topbar {
     background-color:#0876BB;
     width:100%;
     height:40px;
     color:#343436;
    }

    #derek{
      float:left;
      font-size: 1.3em;
      padding-left:100px;
      padding-top:5px;
      font-weight:bold;
    }

    #Menu{
      padding-right: 30px;
    }
        #Menu li{
            float:right;
            font-size: 1.3em;
            font-weight: bold;
            display:inline;
            margin:5px 10px 0px 0px;

            cursor:pointer;
        }
            li:hover{
              color:red;
            }

    .break{
      clear:both;
    }

    #title{
      position:absolute;
    }
    img{
      position:relative;
      opacity:0.6;
      height:100%;
      width:100%;
    }


    </style>

    <body>
        <div id="topbar">

            <div id="derek">Derek</div>

            <div id="Menu">
                 <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Portfolio</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>

        <div class="break"></div>

        <div id="title">
        <h1>Web Development</h1>
        <img src="http://www.wallpapersdb.org/wallpapers/nature/calm_water_2048x1152.jpg" target="_blank">
        </div>


    </body>


    </head>
    </html>

【问题讨论】：

见padding-top:5px;，font-size: 1.3em;#derek
我尝试删除这两个，它仍然存在......空白

标签： css html

【解决方案1】：

你头上的ul，你需要加上margin-top: 0;他是你的top margin的原因

【讨论】：

【解决方案2】：

你的 ul 上的边缘正在造成悲伤。

我已更新 css 以删除边距

为了解决这个问题，我只是删除了元素，直到找到导致问题的 html 块。

html body{
        margin:0;
        padding:0;
    }


     #topbar {
     background-color:#0876BB;
     width:100%;
     height:40px;
     color:#343436;
    }

    #derek{
      float:left;
      font-size: 1.3em;
      padding-left:100px;
      padding-top:5px;
      font-weight:bold;
    }

    #Menu{
      padding-right: 30px;
    }
        #Menu ul {
        margin : 0;
        }
        #Menu li{
            float:right;
            font-size: 1.3em;
            font-weight: bold;
            display:inline;
            margin:5px 10px 0px 0px;

            cursor:pointer;
        }
            li:hover{
              color:red;
            }

    .break{
      clear:both;
    }

    #title{
      position:absolute;
    }
    img{
      position:relative;
      opacity:0.6;
      height:100%;
      width:100%;
    }

<!doctype html>
<html>
<head>
    <title>Personal WebSite</title>
    <body>
        <div id="topbar">
            <div id="derek">Derek</div>

            <div id="Menu">
                 <ul>
                    <li>Home</li>
                    <li>About</li>
                    <li>Portfolio</li>
                    <li>Contact</li>
                </ul>
            </div>
        </div>

        <div class="break"></div>

        <div id="title">
        <h1>Web Development</h1>
        <img src="http://www.wallpapersdb.org/wallpapers/nature/calm_water_2048x1152.jpg" target="_blank">
        </div>


    </body>


    </head>
    </html>

【讨论】：

我的荣幸，css 可以是这样的绑定。