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•hace 5 años

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

Sergio Brandon De Lucio Chavero

Team Platzi•hace 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

student•hace 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

student•hace 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

student•hace 5 años

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

Jeyson David Vargas Crespo

student•hace 5 años

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

Esteban Casallas

student•hace 5 años

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

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