2

Tengo estos elementos creados para hacer un navbar pero el problema para empezar con los li es que tienen un pequeño espacio a la derecha cuando les pongo la propiedad display: inline-block y en el caso del navbar que le estoy agregando solamente el color de fondo blanco y una sombra me pone un espacio en la parte de abajo que no se a que se debe.

introducir la descripción de la imagen aquí

CSS

nav {
    width: 100%;
    background-color: var(--bgColor);
    box-shadow: 14px 0px 23px -16px rgba(0,0,0,0.80);
    display: flex;
    justify-content: center;

    /*Variables*/
    --sideBar: #2f2e41;
    --bgColor: white;
    --fontFocus: #36d29e;
    --fontOn: #b1b1b1;
}

ul {
    background-color: blueviolet;
}

li {
    display: inline-block;
    height: 100px;
}

HTML

<nav>
  <ul>
    <li><a href="">Recipt</a></li>
    <li><a href="">Customers</a></li>
    <li><a href="">My account</a></li>
    <li><a href="">Reports</a></li>
    <li><a href="">UW Manager</a></li>
    <li><a href="">Logout</a></li>
  </ul>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Column 1
    </div>
  </div>
</div>

1 respuesta 1

1

Los espacios que te aparecen vienen predefinidos en el elemento ul, margen (espacio izquierda) y espaciado (espacio superior e inferior) para eliminarlo definelos con valor 0.

margin:0;
padding:0;

en tu codigo quedaria asi:

nav {
    width: 100%;
    background-color: var(--bgColor);
    box-shadow: 14px 0px 23px -16px rgba(0,0,0,0.80);
    display: flex;
    justify-content: center;

    /*Variables*/
    --sideBar: #2f2e41;
    --bgColor: white;
    --fontFocus: #36d29e;
    --fontOn: #b1b1b1;
}

ul {
    background-color: blueviolet;
    padding:0;
    margin:0;
}

li {
    display: inline-block;
    height: 100px;
}
<nav>
  <ul>
    <li><a href="">Recipt</a></li>
    <li><a href="">Customers</a></li>
    <li><a href="">My account</a></li>
    <li><a href="">Reports</a></li>
    <li><a href="">UW Manager</a></li>
    <li><a href="">Logout</a></li>
  </ul>
</nav>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Column 1
    </div>
  </div>
</div>

Espero que te sirva, saludos.

1
  • 1
    Gracias por la respuesta, me sirvió de mucho :)
    – ASASCED
    el 20 oct. 2019 a las 7:21

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.