Alexis David Sánchez Niaupari
PreguntaUna duda, por que ocurre esto?
Sin texto en los contenedores del aside se genera un pequeño espacio entre el main y el footer
Pero al poner cualquier cosa el espacio desaparece
Aqui el codigo, no se si sea error mio
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<link rel=“stylesheet” href=“style.css”>
<title>Display</title>
</head>
<body>
<header>
<figure>
<img src="./Recursos/logo.png" alt="">
</figure>
<ul class=“header_nav”>
<li class=“header_nav–item”>Home</li>
<li class=“header_nav–item”>Videos</li>
<li class=“header_nav–item”>Imagenes</li>
<li class=“header_nav–item”>Perfil</li>
</ul>
</header>
<main>
<aside class=“aside”>
<div class=“aside_container”></div>
<div class=“aside_container”></div>
<div class=“aside_container”></div>
<div class=“aside_container”></div>
</aside>
<section>
<p>Texto Random</p>
<div class=“video_container”>
<video class=“video_container–item” controls
src="./Recursos/Videos/Soredemo Ayumu wa Yosetekuru 1 - AnimeFLV.mp4"></video>
<video class=“video_container–item” controls
src="./Recursos/Videos/Soredemo Ayumu wa Yosetekuru 2 - AnimeFLV.mp4"></video>
<video class=“video_container–item” controls
src="./Recursos/Videos/Soredemo Ayumu wa Yosetekuru 3 - AnimeFLV.mp4"></video>
<video class=“video_container–item” controls
src="./Recursos/Videos/Soredemo Ayumu wa Yosetekuru 4 - AnimeFLV.mp4"></video>
<video class=“video_container–item” controls
src="./Recursos/Videos/Soredemo Ayumu wa Yosetekuru 5 - AnimeFLV.mp4"></video>
</div>
</section>
</main>
<footer>
<div class=“fotter_container1”>
<p>Direccion: Ecuador, Quito, calle Colón y Amazonas</p>
<p>Numeros: 0982410376; 0962624534</p>
<p>Copyright 2022</p>
</div>
<div class=“fotter_container2”>
<button class=“fotter_container–item” type=“submit”>Facebook</button>
<button class=“fotter_container–item” type=“submit”>Instagram</button>
<button class=“fotter_container–item” type=“submit”>Twitter</button>
<button class=“fotter_container–item” type=“submit”>Gmail</button>
</div>
</footer>
</body>
</html>
<code>
- {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
background-color: aqua;
width: 100%;
height: 10vh;
display: block;
}
header figure {
display: inline-block;
position: absolute;
}
header img {
display: inline;
width: 5vw;
height: 5vw;
}
.header_nav {
position: absolute;
right: 0;
}
.header_nav li {
list-style: none;
display: inline-block;
margin: 10px;
}
main {
top: 10vh;
width: 100%;
height: 80%;
}
aside {
background-color: aquamarine;
display: inline-block;
width: 20%;
height: 80vh;
}
section {
background-color: blue;
display: inline-block;
position: absolute;
width: 80%;
height: 80vh;
}
section .video_container {
display: inline-block;
margin: auto;
position: absolute;
}
.video_container video{
width: 20vw;
height: 20vh;
}
.aside_container {
background-color: rgb(25, 0, 255);
width: 15vw;
height: 15vh;
margin: 4vh;
display: block;
}
footer {
height: 10vh;
width: 100%;
background-color: brown;
position: absolute;
display: inline-block;
}
footer div {
display: inline-block;
position: absolute;
}
footer .fotter_container2 {
position: absolute;
right: 0;
margin: 20px;
}
![Curso de HTML y CSS [Empieza Gratis]](https://static.platzi.com/media/achievements/badges-html-css-afa64acb-64a4-486d-96a5-f930fbb7ee32.png){kind=small}
![Curso de HTML y CSS [Empieza Gratis]](https://static.platzi.com/media/courses/Opengraph-definitivo-html-css2.png)