En el proyecto de la barberia alura tengo problemas generando espacio entre los marenes de mi header y footer. En el header no se genera el espacio debajo del logo y en el footer no se genera por encima del logo.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Productos - Barbería Alura</title>
<link rel = "stylesheet" href="style.css">
<link rel = "stylesheet" href="reset.css">
</head>
<body>
<header>
<div class="caja">
<h1><img src="imagenes/logo.png"></h1>
<nav> <!--A partir de HTML5 se puede usar la etiqueta <nav> para crear un menu de navegación-->
<ul>
<!--<a> viene de achor (ancla en ingles) y sirve para referenciar un link,
debo agregar href="" para que sirva-->
<li><a href="index.html">Home</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main>
<ul class="productos">
<li>
<h2>Cabello</h2>
<img src="imagenes/cabello.jpg">
<p class="descripcion-producto">Con tijera o máquina</p>
<p class="precio-producto">10 dólares</p>
</li>
<li>
<h2>Barba</h2>
<img = src="imagenes/barba.jpg">
<p class="descripcion-producto">Corte y diseño profesional de barba</p>
<p class="precio-producto">8 dólares</p>
</li>
<li>
<h2>Cabello + Barba</h2>
<img src = "imagenes/cabello+barba.jpg">
<p class="descripcion-producto">Paquete completo</p>
<p class="precio-producto">15 dólares</p>
</li>
</ul>
</main>
<footer>
<img src="imagenes/logo-blanco.png">
<p class="copyright">© Copyright Barbería Alura</p> <!--Para saber que codigo representa los distintos caracteres uso unicode-table.com y usualmnte uso el valor de entidad-->
</footer>
</body>
</html>CSS
header{
background-color: #BBBBBB;
padding: 20px 0;
}
.productos{
width: 940PX;
margin: 0 auto;
padding: 50px;
}
.productos li{
display: inline-block;
text-align: center;
width: 30%;
vertical-align: top;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
border-color: #000000;
border-width: 2px;
border-style: solid;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.productos li:hover{
border-color: #c78c19; /*borde*/
color: #c78c19; /*titulo*/
}
.productos li:active{
border-color: #088c19;
}
.productos h2{
font-size: 30px;
font-weight: bold;
}
.productos li:hover h2{
font-size: 33px;
}
.descripcion-producto{
font-size: 18px;
}
.precio-producto{
font-size: 22px;
font-weight: bold;
margin-top: 10px;
}
.caja{
width: 940px;
position: relative;
margin: 0 auto;
}
nav {
/*position: relative; /*con la propiedad "relative" le estoy diciendo que en funcion de la posición actual yo puedo modificar su posición*/
position: absolute; /*absolute fija el elemento en un lugar especifico sin tener en cuenta el tamaño de la pantalla*/
top: 125px;
right: 50px;
}
nav li{
display: inline-block;
margin: 0 0 0 15px; /*TIENE 4 PARAMETROS0(arriba), 0(abajo), 0(derecha), 0(izquierda)*/
}
nav a{
text-transform: uppercase /*mayusculas*/;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none; /
}
nav a:hover{
/*esta sección hace que cambie el color del texto (hipervinculo) al pasar el mouse por encima*/
color: #c78c19;
text-decoration: underline;
}
footer{
text-align: center;
background: url(imagenes/bg.jpg);
padding: 80px;
}
.copyright{
color: #ffffff;
font-size: 12px;
padding: 20px;
}
main{
width:940px; /*Se usa 940px por conveción para centrar porque un monitor estandar tiene 1270px*/
margin: 0 auto;
}
form{
margin:40px 0;
}
form label{
display: block;
font-size: 20px;
margin: 0 0 10px;
}
form input{
display: block;
margin:0 0 20px;
padding: 10px 25px;
width: 50%;
}
