为什么打开一个宽度为480px的网站会有空白？

Question

我使用媒体查询已有一段时间了，从来没有遇到过在我网站的顶部和左侧有一个非常小的空白区域的问题，我无法使用“查找元素”找到它。

@font-face {
    font-family: 'Aller Bold';
    src: url('FontFace/Aller_Bd.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aller Display';
    src: url('FontFace/AllerDisplay.ttf');
    font-weight: normal;
    font-style: normal;
}

main {
    margin: 0 auto;
    width: 480px;
}

/*NAV*/

#logo {
    display: none;
}

    #navigation {
        font-family: 'Aller Bold';
        padding: 20px;
        background-color: #f07c00;
        color: #fff;
        text-align: center;
    }

    #navigation ul {
        display: none;
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        margin-bottom: 0;
    }

    #navigation ul.expanded {
        display: block;
    }

    #navigation li a {
        display: block;
        padding: 10px 0;
        border-top: 1px solid #666;
        font-size: 15px;
        color: black;
        text-decoration: none;
    }

    .menu_button {
        margin-right: 22px;
        display: block;
        text-align: right;
        color: #ffc;
        text-decoration: none;
    }


/*slideshow*/

.fadein { position:relative; width:480px; height:140px; }
.fadein img { position:absolute; left:0; width:480px; height:140px;  }


/*table nieuwsoverzicht*/

table tr th.tgth {
    font-family: 'Aller Display';
    color: #f07c00;
    font-size: 16px;
    padding-left: 0;
    margin-left: 0;
    clear: both;
    float: left;
}

table tr td.tgtd {
    font-family: 'Aller Bold';
    font-size: 10px;
    padding-left: 42px;


}

table tr td.tg-datum {
    font-family: 'Aller Bold';
    font-size: 6px;
    padding-top: 5px;
    color: #f07c00;
    padding-left: 42px;

}

table tr td.tg-leesmeer {
    font-family: 'Aller Bold';
    font-size: 6px;
    padding-top: 5px;
    color: #f07c00;
    float: left;
    width: 100px;


}

table tr td.tg-image {
    float: right;


}

hr {

    border-style: solid;
    color: black;
    border-width: 1px;

}

img.smallimg {

    float: right;
    width: 164px;
    height: 96px;

}


/*links*/

h1.links {

    font-family: 'Aller Bold';
    color: #f07c00;
    font-size: 24px;

}

a.links {

    font-family: 'Aller Bold';
    margin-left: 42px;
    font-size: 18px;


}


/*footer*/

footer {

    font-family: 'Aller Bold';
    margin-top: 15px;
    font-size: 13px;
    height: 55px;
    background-color: #f07c00;
    color: black;
    line-height: 55px;
    width: 100%;
}

#test {
    float: right;
    display: inline-block;
}

#linkcontact {


    margin-right: 32px;
}

#linklinks {

    margin-right: 40px;

}

#linkbronnen {

    margin-right: 40px;
}

a:-webkit-any-link {
    color: black;
    text-decoration: none;

}

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" media="screen and (min-width: 480px)" />
    <link rel="stylesheet" href="stylesheet480.css" type="text/css" charset="utf-8" media="screen and (max-width: 480px)" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<script>

    var originalNavClasses;

    function toggleNav() {
        var elem = document.getElementById('navigation_list');
        var classes = elem.className;
        if (originalNavClasses === undefined) {
            originalNavClasses = classes;
        }
        elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
    }

    </script>

<body>
<main>

    <nav id="navigation">
        <img src="logo.jpg" id="logo">
        <a id="mobilemenu" class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>
        <ul id="navigation_list" role="navigation">
            <li><a href=#>Nieuws</a></li>
            <li><a href=#>Info</a></li>
            <li><a href=#>Bezienswaardigheden</a></li>
            <li><a href=#>Keuken</a></li>
            <li id="rightnav"><a href=#>Steden</a></li>
        </ul>
    </nav>

    <script>

        $(function(){
            $('.fadein img:gt(0)').hide();
            setInterval(function(){
                        $('.fadein :first-child').fadeOut()
                                .next('img').fadeIn()
                                .end().appendTo('.fadein');},
                    4000);
        });


        </script>

    <br> <br>

    <div class="fadein">
        <img src="sld1.jpg">
        <img src="sld2.jpg">
        <img src="sld3.jpg">
    </div>

    <br>

    <hr>

    <table class="tg">
        <tr>
            <th class="tgth">De prachtige stad Rotterdam</th>
        </tr>
        <tr>
            <td class="tgtd">Rotterdam is een havenstad gelegen in het westen van Nederland, in de provincie Zuid-Holland. De stad is gelegen aan de Nieuwe Maas,
                een van de rivieren in de delta die gevormd wordt door de Rijn en de Maas.
                De haven van Rotterdam, lange tijd de grootste ter wereld, is de grootste en belangrijkste van Europa. Het havengebied strekt zich uit over een lengte van 40 kilometer.</td>
            <td class="tg-image"><img class="smallimg" src="rotterdamsmall.jpg"></td>
        </tr>
        <tr>
            <td class="tg-datum">Datum: 09/07/2015</td>
            <td class="tg-leesmeer">Lees meer -></td>
        </tr>
    </table>

    <hr>


    <br> <br><br> <br><br> <br><br> <br>





    <footer>
        <div id="test">
        <a href="Bronnen" id="linkbronnen">Bronnen</a>
        <a href="Links" id="linklinks">Links</a>
        <a href="Contact" id="linkcontact">Contact</a>
        </div>
    </footer>


</main>
</body>
</html>

当您确保浏览器的宽度为 480 像素时，您会看到在左侧和顶部都有一个非常小的空白区域，我希望将其去除。非常感谢您的帮助！

Answer 1

尝试将以下内容添加到您的 CSS 中：

body {
    margin: 0px;
}

那应该去掉白色的space。

Answer 2

就是浏览器的问题，不知道为什么！只需这样做：

/*
 (*) mean All Elements , this code remove all margin and padding from all element include html and body also  ^_^
*/
*{
  margin:0;
  padding:0;
}

为什么打开一个宽度为480px的网站会有空白？

Why is there whitespace when opening a website with a width of 480px?

html

css

mobile

media-queries

whitespace