Buenas tardes. Estoy empezando en esto de la programación web con HTML5 y CSS3 y próximamente JS, y al hacer un intento de página web, sin tener ninguna función actual, tras haber hecho el header que contiene un form únicamente (y de momento), y acto seguido un nav con tres links, aparece entre éstos, un espacio en blanco como si hubiera un párrafo o un margin.
Ahora que lo he ejecutado con el ejecutador de código, ese espacio que menciono, no aparece, pero si lo ejecuto en mi equipo local, sí que sigue apareciendo.
Así se me muestra:
CSS3
body {
padding: 0;
margin: 0;
font-family: Monaco, Consolas, "Lucida Console", monospace;
background-color: #151515;
word-wrap: break-word;
}
/* TODO PARTE DEL HEADER */
header {
width: 100%;
height: auto;
border: 0px black solid;
display: block;
background-color: #005eff;
box-sizing: border-box;
}
input[type=text] {
padding: 6px 5px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=password] {
padding: 6px 5px;
margin: 8px 0;
box-sizing: border-box;
}
input[type=submit] {
color: white;
padding: 7px;
background-color: #0045ff;
border: 1px #0045ff solid;
}
input[type=submit]:active {
color: white;
padding: 7px;
background-color: #003EE5;
border: 1px black solid;
}
.registro {
color: white;
width: auto;
font-size: 12.3px;
text-shadow: none;
}
form {
padding: 1%;
text-align: right;
border: 0px solid black;
}
/* TODO PARTE DEL NAV */
nav {
height: auto;
width: 42%;
background-color: #005eff;
text-align: center;
border-radius: 0px 0px 7px 7px;
padding-top: 10px;
padding-bottom: 10px;
margin: auto;
}
nav a {
padding-left: 2%;
padding-right: 2%;
}
a {
color: white;
text-decoration: none;
font-size: 21px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* TODO PARTE DEL CENTRO */
article{
height: auto;
width: 90%;
margin: auto;
margin-top: 15px;
text-align: center;
font-size: 36px;
color: white;
}
div#quees span#antes {
display:block;
text-align: center;
font-size: 36px;
color: white;
}
div#quees:hover span#antes {
display:none;
text-align: center;
font-size: 36px;
color: white;
}
div#quees span#despues {
display:none;
text-align: center;
font-size: 36px;
color: white;
}
div#quees:hover span#despues {
display:inline;
text-align: center;
font-size: 36px;
color: white;
}
table{
margin-left:auto;
margin-right:auto;
}
/* TODO PARTE DEL FOOTER */
footer{
height: auto;
width: 42%;
text-align: center;
margin: auto;
font-size: 9px;
margin-top: 15px;
color: white;
}
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Título</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<form>
<input type="text" name="uname" placeholder="Nombre" required>
<input type="password" name="passwd" placeholder="Contraseña" required><br>
<input type="submit" value="Iniciar sesión"> <a href="https://google.es" class="registro">Regístrate</a>
</form>
</header>
<nav>
<a href="#">INICIO</a> <a href="#">HISTORIA</a> <a href="#">NOTICIAS</a>
</nav>
<article>
<p>
¿Y si... nada de lo que créemos que es real, lo es, más que serlo por ser un imperativo social?
</p>
<p>
<div id="quees">
<table border="0">
<tr>
<td><span id="antes">¿Qué es esto?</span><span id="despues">Nada de momento...</span></td>
</tr>
</table>
</div>
</p>
</article>
<footer>
Página WEB creada por Javier Green - 2017
</footer>
</body>
</html>