0
我一直在使用mediaqueries一段時間，從來沒有問題，在我的網站的頂部和左側，有一個非常小的空白，我找不到使用「查找元素」。爲什麼打開寬度爲480px的網站時會出現空格？
@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像素寬，你會看到在左側和頂部，有一個非常小的空白，這是我正在找得到擺脫。非常感謝幫助！
你好@MichaelJones，謝謝大家的響應速度快，我有保證金：0在我的主要元素，而不是身體的元素。 –
沒問題！ :)每個人都犯錯誤：D –