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

Pregunta

student•

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

student•

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

Jeyson David Vargas Crespo

student•

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

Gabriel Abreu

student•

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

Jeyson David Vargas Crespo

student•

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

student•

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

student•

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