This question has already been answered:

Hello. Not like you can not remove the distance between the links.

.menu { border-left: 28px solid green; border-right: 28px solid green; text-align: center; /*background-color: green;*/ } .menu a { background-color: green; padding: 15px; display: inline-block; margin: 0; text-decoration: none; color: #fff; border-left: 1px solid #000; border-right: 1px solid #000; } .menu a:hover { display: inline-block; background-color: #eee; } 
  <div class="menu"> <a href="/">Главная</a> <a href="/">О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a> <a href="/">ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΡ</a> <a href="/">Π“Π΄Π΅ ΠΊΡƒΠΏΠΈΡ‚ΡŒ</a> <a href="/">ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€</a> <a href="/">ДокумСнтация</a> <a href="/">Новости</a> <a href="/">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a> </div>

I would be grateful for the help!

Reported as a duplicate member of the Spirit Community ♦ Aug 9 '16 at 6:04 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • Add to the .menu a property float: left; - Maqsood
  • parent - font-size: 0; child - font-size: xx px; - soledar10

5 answers 5

Here, in general, the designers of the Lord, what advice they put on kx, kx in general, any list should be arranged according to semantic value, and this ul>li>a is the screen of what happens in this case enter image description here

lower example in snippet

 *{ margin:0; padding:0; } .menu { border-left: 28px solid red; border-right: 28px solid red; text-align: center; } .menu li{ list-style:none; display:inline-block; height:40px; background:green; line-height:40px; padding:0 10px; } .menu a { text-decoration: none; color: #fff; display:block; width:100%; height:100%; text-align:center; } .menu li:hover{ background:darkgreen; } 
 <div class="menu"> <ul> <li><a href="/">Главная</a> <li><a href="/">О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a> <li><a href="/">ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΡ</a> <li><a href="/">Π“Π΄Π΅ ΠΊΡƒΠΏΠΈΡ‚ΡŒ</a> <li><a href="/">ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€</a> <li><a href="/">ДокумСнтация</a> <li><a href="/">Новости</a> <li><a href="/">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a> </ul> </div>

But still, if it’s so necessary to make a menu without a bulleted list, then here’s an example of what happens. enter image description here

  *{ margin:0; padding:0; text-decoration:none; } .menu{ width:100%; height:auto; background:#fff; border-left:20px solid darkgreen; border-right:20px solid darkgreen; box-sizing:border-box; } menu{ display:table; margin:auto; height:50px; line-height:50px; background:#FFF; } menu a{ padding:17px 10px; background:lightgreen; } menu a:hover{ background:darkgreen; color:#fefefe; } 
 <div class="menu"> <menu> <a href="">Главная</a> <a href="">ГостСвая</a> <a href="">Π€ΠΎΡ€ΡƒΠΌ</a> <a href="">Π‘Π»ΠΎΠ³</a> <a href="">Обо всё</a> <a href="">ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹</a> <a href="">Π—Π°Π΄Π°Ρ‡ΠΈ</a> <a href="">О нас</a> </menu> </div>

And this example on codepen in general, though not on the topic of the issue, but a super solution + adaptive

    I will add one more way. It is necessary to comment out spatially between links, since browsers consider this to be an interval between words. You can also simply arrange the tags in the code in a row, in a single line, without gaps and line breaks.

     .menu { border-left: 28px solid green; border-right: 28px solid green; text-align: center; /*background-color: green;*/ } .menu a { background-color: green; padding: 15px; display: inline-block; margin: 0; text-decoration: none; color: #fff; border-left: 1px solid #000; border-right: 1px solid #000; } .menu a:hover { display: inline-block; background-color: #eee; } 
     <div class="menu"> <a href="/">Главная</a><!-- --><a href="/">О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a><!-- --><a href="/">ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΡ</a><!-- --><a href="/">Π“Π΄Π΅ ΠΊΡƒΠΏΠΈΡ‚ΡŒ</a><!-- --><a href="/">ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€</a><!-- --><a href="/">ДокумСнтация</a><!-- --><a href="/">Новости</a><!-- --><a href="/">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a> </div>

    • about space commenting did not know + from me - user33274

     .menu { border-left: 28px solid green; border-right: 28px solid green; text-align: center; /*background-color: green;*/ } .menu a { background-color: green; padding: 15px; display: inline-block; margin: -3px; text-decoration: none; color: #fff; border-left: 1px solid #000; border-right: 1px solid #000; } .menu a:hover { display: inline-block; background-color: #eee; } 
     <div class="menu"> <a href="/">Главная</a> <a href="/">О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a> <a href="/">ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΡ</a> <a href="/">Π“Π΄Π΅ ΠΊΡƒΠΏΠΈΡ‚ΡŒ</a> <a href="/">ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€</a> <a href="/">ДокумСнтация</a> <a href="/">Новости</a> <a href="/">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a> </div>

    • negative margin is a clumsy solution - user33274
     <div class="menu"> <a href="/">Главная</a><a href="/">О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a><a href="/">ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΡ</a><a href="/">Π“Π΄Π΅ ΠΊΡƒΠΏΠΈΡ‚ΡŒ</a><a href="/">ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€</a><a href="/">ДокумСнтация</a><a href="/">Новости</a><a href="/">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a> </div>

    As a matter of fact, the point is that between them there is a tab character, which the browser makes spaces.

    and display: inline-block; it also adds 4 pixels for each element following the first element, which can be removed using margin-left:-4px

       <body> <div class="menu"> <a href="/">Главная <a href="/">О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ <a href="/">ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΡ <a href="/">Π“Π΄Π΅ ΠΊΡƒΠΏΠΈΡ‚ΡŒ <a href="/">ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€ <a href="/">ДокумСнтация <a href="/">Новости <a href="/">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹ </div>

      in fact, there are a lot of solutions; here’s one of the workers; we remove the closing tags - html5 allows you to do so

      • and syntax errors, how do we remove? - Andrey Shpileva