我使用媒体查询已有一段时间了，从来没有遇到过在我网站的顶部和左侧有一个非常小的空白区域的问题，我无法使用“查找元素”找到它。
@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;">☰ 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 像素时，您会在左侧和顶部看到一个非常小的空白区域，我希望将其去除。非常感谢您的帮助!
最佳答案
尝试将以下内容添加到您的 CSS 中:
body {
margin: 0px;
}
那应该去掉空白。
关于html - 为什么打开一个宽度为480px的网站会有空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31330029/