我现在已经使用了一段时间的媒体查询,并且从来没有遇到过我的网站顶部和左侧的问题,这是一个非常小的空白,我无法使用"找到元素"。
@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>
&#13;
当您确定浏览器的宽度为480px宽时,您会在左侧和顶部看到,这是一个非常小的空白,我希望摆脱它。非常感谢帮助!
答案 0 :(得分:0)
尝试向您的CSS添加以下内容:
body {
margin: 0px;
}
那应该摆脱白色空间。
答案 1 :(得分:0)
简单来说就是浏览器,我不知道为什么!只需这样做:
<div class="header">
Header123
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PROJECT</li>
</ul>
</div>
<div class="main">
Article
</div>
<div class="footer">Footer</div>