为什么打开宽度为 480px 的网站会出现空白？答案

【问题标题】：Why is there whitespace when opening a website with a width of 480px?为什么打开宽度为 480px 的网站会出现空白？
【发布时间】：2015-07-15 05:22:29
【问题描述】：

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

@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 像素时，您会看到左侧和顶部都有一个非常小的空白，我希望将其去掉。非常感谢您的帮助！

【问题讨论】：

您好@MichaelJones，感谢您的快速响应，我的主要元素中有margin:0，而不是正文元素。
没问题！ :) 每个人都会犯错：D

标签： html css mobile media-queries whitespace

【解决方案1】：

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

body {
    margin: 0px;
}

这应该去掉空白。

【讨论】：

【解决方案2】：

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

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

【讨论】：