За последние 24 часа нас посетили 20113 программистов и 1695 роботов. Сейчас ищут 1863 программиста ...

Появляются отступы, хотя padding и margin - 0.

Тема в разделе "HTML и CSS", создана пользователем SamyRed, 13 май 2016.

  1. SamyRed

    SamyRed Старожил

    С нами с:
    23 июл 2015
    Сообщения:
    1.196
    Симпатии:
    111
    Адрес:
    Украина
    Здравствуйте. У меня такая проблемка:
    Меню сайта имеет такую структуру:
    Код (PHP):
    1.         <ul id="adm_menu">
    2.             <li><a href='admin.php?system'>Системные настройки</a></li>
    3.             <li class='sublink'><a href='admin.php?users'>Пользователи</a>
    4.                 <ul>
    5.                     <li><a href='admin.php?users=control'>Управление пользователями</a></li><br/>
    6.                     <li><a href='admin.php?users=groups'>Группы пользователей</a></li>
    7.                 </ul>
    8.             </li>
    9.             <li class='sublink'><a href='admin.php?modules'>Модули</a>
    10.                 <ul>
    11.                     <li><a href='admin.php?modules=servers'>Настройка серверов</a></li><br/>
    12.                     <li><a href='admin.php?modules=control'>Настройка модулей</a></li>
    13.                 </ul>
    14.             </li>
    15.         </ul>
    Вот css:
    Код (PHP):
    1. * {
    2.     margin: 0;
    3.     padding: 0;
    4.     font-family: Comic sans ms, Tahoma, Times new roman, Arial;
    5.     outline: none;
    6. }
    7.  
    8. #adm_menu {
    9.    width: 1000px;
    10.     margin: 43px auto 0 auto;
    11.     font-size: 16px;
    12.     box-sizing: border-box;
    13.     border: 3px solid #61FFAD;
    14.    border-bottom: none;
    15.     background: #EBFFF4;
    16.    color: #025200;
    17. }
    18.  
    19. #adm_menu li {
    20.    list-style: none;
    21.     display: inline;
    22. }
    23.  
    24. #adm_menu li a {
    25.    padding: 0 10px;
    26.     text-decoration: none;
    27.     line-height: 42px;
    28. }
    29.  
    30.  
    31. #adm_menu li a:hover {
    32.    background: #BDFFDA;
    33. }
    Но при наведении на элемент #adm_menu li a - фон появляется не на всю высоту, а меньше, такое ощущение что там появляется како-то неведомый margin, или padding у элемента #adm_menu.
    Вот скриншоты с отладчика chrome:
    http://joxi.ru/8239pGyi6Q1J1r - тут видно что у элемента #adm_menu нет падингов.
    http://joxi.ru/KAxn901F4GxM7m - у li нет margin'ов
    http://joxi.ru/p27W7pJu0dPoM2 - у a падинги только по бокам. Как такое может быть? Отступов нет, но элементы всё равно меньше чем надо. Кстати, боковые отступы тоже есть небольшие, хотя на самом деле их нет.
     
  2. MiksIr

    MiksIr Активный пользователь

    С нами с:
    29 ноя 2006
    Сообщения:
    2.339
    Симпатии:
    44
    У тебя на li - display: inline, это значит что li по высоте равен тексту.
     
  3. SamyRed

    SamyRed Старожил

    С нами с:
    23 июл 2015
    Сообщения:
    1.196
    Симпатии:
    111
    Адрес:
    Украина
    А line-height не влияет разве на это?
     
  4. MiksIr

    MiksIr Активный пользователь

    С нами с:
    29 ноя 2006
    Сообщения:
    2.339
    Симпатии:
    44
    Он как раз влияет на расстояние между строчками. Из-за него дырка и получается. между inline строчками
     
  5. SamyRed

    SamyRed Старожил

    С нами с:
    23 июл 2015
    Сообщения:
    1.196
    Симпатии:
    111
    Адрес:
    Украина
    Я убрал display: inline, всё конечно сползло куда не надо, но отступы остались. http://joxi.ru/DrlvVxdF4zl882
     
  6. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    хватит мазохизма, давай ссылку на живой пример
     
  7. SamyRed

    SamyRed Старожил

    С нами с:
    23 июл 2015
    Сообщения:
    1.196
    Симпатии:
    111
    Адрес:
    Украина
    Во первых сайт у меня на openserver лежит, но это ещё ладно, я залью, но это всё дело происходит в админпанели))) Так что если так сложно - придётся подождать
    --- Добавлено ---
    http://new.samycraft.com/admin.php
     
  8. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Сам подумай, чем легче тебе помочь, тем больше вероятность.
     
  9. MiksIr

    MiksIr Активный пользователь

    С нами с:
    29 ноя 2006
    Сообщения:
    2.339
    Симпатии:
    44
    https://jsfiddle.net/
    --- Добавлено ---
    Ну так у тебя бекграунд под a меняется, уж догадаться тут можно. Или делай a блоком, или hover стили для li делай.
     
    SamyRed нравится это.
  10. SamyRed

    SamyRed Старожил

    С нами с:
    23 июл 2015
    Сообщения:
    1.196
    Симпатии:
    111
    Адрес:
    Украина
    Ну сделал я а блоком, но всё сползло в вертикальный список
    Как сделать чтоб он снова стал горизонтальным?
     
  11. MiksIr

    MiksIr Активный пользователь

    С нами с:
    29 ноя 2006
    Сообщения:
    2.339
    Симпатии:
    44
    display: inline-block например
    или float
    или гугул ;)
     
  12. SamyRed

    SamyRed Старожил

    С нами с:
    23 июл 2015
    Сообщения:
    1.196
    Симпатии:
    111
    Адрес:
    Украина
    Ок. Спасибо большое. Разобрался.