La página web tiene relleno superior, no puedo deshacerme de él

Me estoy volviendo loco tratando de deshacerme de este pequeño relleno en la parte superior de la página web. Aparece en todos los navegadores. Aquí hay una fotofoto

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8" />
<link href="mainpage.css" rel="stylesheet" type="text/css" />
<title>Mobile Development</title>
</head>

<body>
<div id="topnavcontainer">
<ul id="navlist">
    <li id="active"><a href="#" id="current">Services</a></li>
    <li><a href="#">Mobile</a></li>
    <li><a href="#">Cloud</a></li>
    <li><a href="#">Development</a></li>
    <li><a href="#">Our Work</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</div>  
<div id="bodycontainer">
</div>
</body>
</html>

Archivo CSS mainpage.css

@charset "UTF-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
}
body
{
background: #000000;
font-family: Georgia, Serif;
white-space:nowrap;
}

#topnavcontainer
{
height:5em;
background-color:#0f0f0f;
background-image: url(Images/crosshatch.png);
}

#navlist li
{
display: inline-block;
list-style-type: none;
padding-right: 20px;    
}

#navlist a:link, a:visited, a:hover, a:active
{
color:white;
list-style:none;
text-decoration:none;

}

preguntado el 28 de agosto de 11 a las 01:08

5 Respuestas

conjunto:

* {
margin: 0;
}

html {
margin: 0;
}

body {
margin: 0;
}

Respondido 28 ago 11, 05:08

Esto funcionó, ¿puede explicarme por qué * {margin: 0;} funcionó y para qué sirve? - Spentak

@spentak: se conoce como restablecimiento del navegador. Este en particular no es muy completo. los * la regla en CSS coincidirá con todos los elementos - Matthew Scharley

@spentak: el hecho de que haya funcionado significa que tienes un elemento en particular que lo causa. En lugar de definir todo margins como 0, debería encontrar el elemento problemático. Sospecho que es li. - Devin Burke

@spentak margin es el espacio fuera del cuadro, el relleno es el espacio dentro del cuadro. - Michael

Oh, * span {} (por ejemplo) solo funciona en IE. Los confundí. - Devin Burke

ul {
    margin-top: 0;
}

También tu <meta> La etiqueta tiene una sintaxis defectuosa.

Respondido 28 ago 11, 05:08

Sus ul y liLos correos electrónicos que son enlaces en su barra de navegación tienen un margen superior que debe eliminarse.

ul, li {
    margin-top:0;
}

Respondido 28 ago 11, 05:08

li viene con un margen predeterminado? - Spentak

ul lo hace, no necesariamente li como dije originalmente. - Devin Burke

Cada navegador tiene sus propias reglas CSS predeterminadas para las etiquetas HTML. Debería utilizar un restablecimiento de CSS (por ejemplo: http://meyerweb.com/eric/tools/css/reset/) para eliminar las propiedades establecidas por el CSS de los navegadores (en su página, el elemento ul tiene las propiedades CSS predeterminadas que definen algunos márgenes para él). Una regla como:

ul {margin: 0; padding: 0}

debería eliminar el formato predeterminado para el elemento ul.

Respondido 28 ago 11, 05:08

Como otros han mencionado, no está restableciendo sus estilos CSS correctamente, por lo que el margen predeterminado del ul de su menú muestra ese margen adicional en la parte superior. Aquí hay una solución rápida a este problema:

ul#navlist {
   margin:0;
}

Aunque recomiendo encarecidamente una hoja de reinicio, con una simple inclusión de esta hoja se resuelve el problema: http://necolas.github.com/normalize.css/

Respondido 29 ago 11, 03:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.