Hola, tengo una duda. Por qué al final de mi aside que lo puse dentro del main, queda esta línea verde del main? Cómo puedo hacer para qu...

Johann Sebastian Pérez E

Pregunta

student•hace 4 años

Hola, tengo una duda. Por qué al final de mi aside que lo puse dentro del main, queda esta línea verde del main? Cómo puedo hacer para que mi aside ocupe hasta abajo del main. Muchas gracias por la ayuda

<!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" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        font-size: 62.5%;
      }
      body {
        font-size: 1.6rem;
      }
      header {
        background-color: lightgray;
        width: 100vw;
        height: 50px;
      }
      .logo {
        position: absolute;
      }
      .nav ul {
        position: absolute;
        right: 1.5rem;
        list-style: none;
      }
      li {
        display: inline;
        padding-right: 5px;
      }
      a {
        color: white;
        text-decoration: none;
      }
      main {
        background-color: olive;
      }
      aside {
        background-color: pink;
        width: 20vw;
        min-width: 200px;
        display: inline-block;
        height: 100%;
      }
      aside div {
        height: 150px;
        width: 80%;
        background-color: lightgray;
        border-radius: 5px;
        margin: 15% auto;
      }
      section {
        width: 80vw;
        display: inline-block;
        position: absolute;
      }
      footer {
        background-color: rgb(255, 123, 0);
        width: 100%;
        height: 40px;
        display: inline-block;
      }
      .info {
        display: inline-block;
        position: absolute;
      }
      .rrss {
        display: inline-block;
        position: absolute;
        right: 1.5rem;
      }
    </style>
  </head>
  <body>
    <header>
      <span class="logo">Logo</span>
      <div class="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Cursos</a></li>
          <li><a href="#">Instructores</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
      </div>
    </header>
    <main>
      <aside>
        <div class="aside"></div>
        <div class="aside"></div>
        <div class="aside"></div>
        <div class="aside"></div>
      </aside>
      <section>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
          necessitatibus omnis et iure. Distinctio placeat, iusto harum ipsum
          mollitia deleniti facere aliquam dolor nostrum sit molestiae deserunt
          sequi, ducimus quisquam!
        </p>
      </section>
    </main>
    <footer>
      <div class="info">Empresa X, Colombia</div>
      <div class="rrss">
        <a href="">Facebook</a>
        <a href="">Twitter</a>
      </div>
    </footer>
  </body>
</html>

Johann Sebastian Pérez E

student•hace 4 años

Gracias compañera @alejandrarm muy buen artículo con muchos hacks útiles. Saludos

Alejandra Rodríguez Marín

student•hace 4 años

Ese espacio extra está siendo añadido por el display: inline-block, acá hay un link donde explican cómo removerlo: https://css-tricks.com/fighting-the-space-between-inline-block-elements/.

Una de las soluciones que comentan en ese link sería ajustar las reglas css del selector (main) así::

      main {         background-color: olive;         font-size: 0;       }

y añadir

      section p {         font-size: 16px;       }

Hola, tengo una duda. Por qué al final de mi aside que lo puse dentro del main, queda esta línea verde del main? Cómo puedo hacer para qu...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]