Experimenting with CSS. Found such a problem, although the margin is zero, the buttons are still a short distance from each other. Magic?

Demo: http://w-0rld.ru/news

Help them stick to each other.

Browser: Chrome 44.0.2403.125 m (maybe the problem is in it?)

  • one
    Are there spaces between the elements? - smellyshovel
  • Line breaks? If the elements are inline, then here it is. - smellyshovel
  • float: left at MenuLink - vital mar

2 answers 2

This is a display: inline-block; problem display: inline-block;

Option 1:

 button+button { margin-left: -5px; }

Option 2:

Place the button without hyphenation.

 ... <button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button>...

Option 3:

 button { float: left; }
  • Simple and clear. Thank. - W_0rld
  • Option 1 figovenky - andreymal
  • @andreymal to someone that, but I constantly use it and have not let it down yet! - HamSter
 <div class="Menu"> <button class="MenuLink" id="News"><a href="/news">Новости</a></button><!-- --><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!-- --><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!-- --><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!-- --><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!-- --><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!-- --><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!-- --><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button> </div>