Question

我有点麻烦搞清楚为什么我的html文件顶部有大约10px的空格。在CSS中，我在＆＃34; body＆＃34;中创建了边距和填充0。但它仍然存在。有帮助吗？谢谢！

更新：所以我发现删除顶部的！doctype html会删除带谷歌浏览器浏览器的空白区域，但不会删除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>

Answer 1

ul ，你需要添加 margin-top：0; 他是你的上边距的原因

Answer 2

你的ul的余量引起了悲伤。

我已更新css以移除保证金

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

＆＃13;

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%;
    }

＆＃13;

<!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>

＆＃13;

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

2 个答案: