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

Jeyson David Vargas Crespo

Pregunta
studenthace 5 años

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

![](Captura de Pantalla 2020-08-10 a la(s) 9.34.54 a. m..png

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...
6 respuestas
para escribir tu comentario
    Sergio Brandon De Lucio Chavero

    Sergio Brandon De Lucio Chavero

    studenthace 4 años

    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 :) .

    Jorge Escamilla

    Jorge Escamilla

    studenthace 5 años

    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

    Jeyson David Vargas Crespo

    Jeyson David Vargas Crespo

    studenthace 5 años

    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...

    Gabriel Abreu

    Gabriel Abreu

    studenthace 5 años

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

    Jeyson David Vargas Crespo

    Jeyson David Vargas Crespo

    studenthace 5 años

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

    Esteban Casallas

    Esteban Casallas

    studenthace 5 años

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

Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Construye un clon de Google usando HTML y CSS. Aprende a estructurar y estilizar un sitio web completo, desde el header hasta el footer, usando técnicas de maquetación como Flexbox y Grid. Ideal para afianzar tus fundamentos.

Curso Práctico de HTML y CSS
Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Construye un clon de Google usando HTML y CSS. Aprende a estructurar y estilizar un sitio web completo, desde el header hasta el footer, usando técnicas de maquetación como Flexbox y Grid. Ideal para afianzar tus fundamentos.