0

Здравствуйте. Проблема следующая вертикальные отступы по макету одни, а на практике, задавая эти размеры в css коде, в браузере отступы получаются больше чем надо. Сбрасывал отступы для всего чего только можно, нет никакого результата. Помогите пожалуйста разобраться, может где-то что-то недоглядел.

Скриншот https://yadi.sk/d/OSQPOqjkTDVem

html код

  <header class="header">
    <div class="container">
       <nav class="header-menu">
         <ul>
       <li><a href="#">Главная</a></li>
       <li><a href="#">Информация</a></li>
       <li><a href="#">Новости</a></li>
         </ul>
       </nav>
    </div>
  </header>

css

body {
font-size: 16px;
width: 100%;
}
.container {
margin: 0 auto;
width: 940px;
}
/* Header */
.header {
background: #000000;
width: 100%;
border-top: 1px solid #242424;
}
/* Header --> menu */
.header-menu li {
display: inline-block;
}
.header-menu a {
color: #fff;
display: inline-block;
padding-top: 30px;
padding-bottom: 31px;
padding-left: 22px;
padding-right: 22px;
margin-right: -0.2em;
text-decoration: none;
}

1 ответ 1

1

Возможно различается размер того от чего считается padding? т.е. элементов li. Покрути значение line-height. Ведь высота строки это не расстояние между самым верхним и самым нижним пикселем текста.

1
  • Получилось! Благодарю за помощь. Указал .header-menu li { line-height: 1em; } и всё стало на свои места.
    – gershmit
    12 июн 2014 в 21:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.