Hola, saben porque me queda un espacio en blanco al final de la hoja??? ![]( Este es mi código: <code>body { margin: 0; padding: ...

Jeyson David Vargas Crespo

EstudiantePregunta

Hola, saben porque me queda un espacio en blanco al final de la hoja???

![](

Este es mi código:

body {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
}


.footer {
    position: absolute;
    height: 80px;
    bottom: 0;
    width: 100%;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;
    color: #65696f;
    background-color: #f2f2f2;
}

.colombia {
    height: 40px;
    width: 100%;
    display: flex;
    border-top: 1px solid #e4e4e4;
    text-align: left;
    position: relative;
    padding-left: 15px;
}

footer p {
    padding-left: 15px;
}

.menu-footer {
    display: flex;
    height: 40px;
    width: 100%;
    border-top: 1px solid #e4e4e4;
    justify-content: space-between;
    align-items: center;
    color: #5f6368
}

ul li a:visited {
    color: #5f6368;
}
ul li a:hover {
    text-decoration: underline;
}

.footer-left {

    text-align: left;
    display: flex;
    list-style: none;
    margin-left: 0;
    padding-left: 15px;
}

.footer-right {
    display: flex;
    list-style: none;
    text-align: right;
    margin-right: 15px;
}

ul li a {
    display: flex;
    
    margin: 10px;
    padding: 5px;
    
}



Y el HTML:


<footer class="footer">
            <div class="colombia">
                <p>Colombia</p>
            </div>
            <div class="menu-footer">
            <ul class="footer-left">
                <li>
                    <a href="">Publicidad</a>
                </li>
                <li>
                    <a href="">Negocios</a>
                </li>
                <li>
                    <a href="">Acerca de</a>
                </li>
                <li>
                    <a href="">Como funciona la busqueda</a>
                </li>
            </ul>
            <ul class="footer-right">
                <li>
                    <a href="">Privacidad</a>
                </li>
                <li>
                    <a href="">Condiciones</a>
                </li>
                <li>
                    <a href="">Prefencia</a>
                </li>
            </ul>     
        </div> 
        </footer>```


Muchas gracias por su ayuda...

Esteban Casallas

Estudiante

podria usar devTools para ver la causa en Platzi hay todo un curso de esta herramienta,

Jeyson David Vargas Crespo

Estudiante

Hola, gracias por tu respuesta, pero con Devtools no he podido saber porque me queda ese espacio...

Gabriel Abreu

Estudiante

si margin bottom 0 no funciona pon margin buttom -30px

Jeyson David Vargas Crespo

Estudiante

Hola, no nada, no me funciona, sigue apareciendo ese espacio...cuando le doy inspeccionar tanto en todo el html, en el body y en el footer me selecciona todo el contenido pero deja ese espacio en blanco...

Agradezco su ayuda...

Jorge Escamilla

Estudiante

Recuerda los margins, tus ul tenían margins, eso es lo que agregaba ese margin inferior.

Igual te dejo un refactor del código de cómo haría alguna cosas.

HTML

<footer class="footer">
    <div class="colombia">
      <p>Colombia</p>
    </div>

    <div class="footer-menuContainer">
      <ul class="footer-menu">
        <li>
          <a class="footer-link" href="">Publicidad</a>
        </li>

        <li>
          <a class="footer-link" href="">Negocios</a>
        </li>

        <li>
          <a class="footer-link" href="">Acerca de</a>
        </li>

        <li>
          <a class="footer-link" href="">Como funciona la busqueda</a>
        </li>
      </ul>

      <ul class="footer-menu">
        <li>
          <a class="footer-link" href="">Privacidad</a>
        </li>

        <li>
          <a class="footer-link" href="">Condiciones</a>
        </li>

        <li>
          <a class="footer-link" href="">Prefencia</a>
        </li>
      </ul>
    </div>
  </footer>

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
  color: #65696f;
  font-family: Arial, Helvetica, sans-serif;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding-right: calc(50vw - 95% / 2);
  padding-left: calc(50vw - 95% / 2);
  background-color: #f2f2f2;
}

.footer p {
  margin: 0;
}

.colombia {
  padding: 1rem 0;
  border-bottom: 1px solid #e4e4e4;
}

.footer-menuContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-menu {
  margin: 0;
  padding: 1rem 0;
  display: flex;
}

.footer-menu li {
  list-style: none;
}

.footer-menu li + li {
  margin-left: 2rem;
}

.footer-link {
  text-decoration: none;
  color: inherit;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-link:visited {
  color: #5f6368;
}

Te dejo un Pen para que lo veas live

Sergio Brandon De Lucio Chavero

Estudiante

Estoy de acuerdo con @akacronos , lo más probable es que se el margin lo que este afectando el footer de la página web :) .

Hola, saben porque me queda un espacio en blanco al final de la hoja??? ![]( Este es mi código: <code>body { margin: 0; padding: ...

Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS