Leave no space for two li


This Ul li you run out of space between the two Li. Any way to solve it?

HTML code <nav>          <ul>              <li><a href="#">Inicio</a></li>              <li><a href="#">Canciones</a></li>          </ul> </nav> CSS Code nav{ line-height: 90px; font-size: 20px; float:right; margin-right: 30%; } nav ul li{ display:inline; border:1px solid; } nav ul li a{ text-decoration: none; color:black; }

asked by Borja Sanchez 05.10.2017 в 22:29

1 answer


When you use display:inline or display_inline-block a margin is always generated between the elements


This behavior of the items with the inline-block value of leaving a gap between each of them is a consequence of the part they have of an item in line.

You can solve it in the following way:

nav ul li{
    border:1px solid;
    margin-left: -4px;

nav ul li:first-child{

I leave you this link with a very clear explanation and other ways to solve that problem.

I hope you serve, greetings!

answered by 05.10.2017 / 22:39