2

Между логотипом и появился непонятный отступ.

Откуда он берется и как его убрать?

[на картинке отступы указаны красным

HTML:

<header>
<img src="http://pfo.spr.ru/pages_logotip/4444176/15009.png" />

    <div class="contact-info-top">
      <div class="contact-info-top-logo">
      </div>
      <p>По всем вопросам</p>
      <span>8 800 555-35-35</span>
      <p>Пн - Пт / 10:00-19:00</p>
    </div>

    <nav>
      <ul>
        <li><a href="###">Главная</a></li>
        <li><a href="###">Мужские часы</a></li>
        <li><a href="###">Женские часы</a></li>
        <li><a href="###">О нас</a></li>
      </ul>
    </nav>
  </header>

CSS

/*-----COMMON-----*/
@import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic-ext);
@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,cyrillic,cyrillic-ext);

body {
  background: white;
  margin: 0 auto;
  width: 80%;
  font-family: 'PT Sans', sans-serif;
}

/*-----HEADER STYLE-----*/
header {
  position: relative;
}

.contact-info-top {
  float: right;
  margin-right: 2em;
  margin-top: 1em;
  position: relative;
}

.contact-info-top-logo {
  position: absolute;
  left: -55px;
  top: 15%;
}

.contact-info-top p {
  margin: 0 auto;   
  color: #2A282D;
}

.contact-info-top span {
  font-style: italic;
  font-weight: bold;
  font: 1.2em Lobster;
}

header nav {
  background: black;
  height: 3em;
}

header nav li {
  display: inline-block;
  margin-right: 2em;
  margin-top: 0.6em;
}

header nav a {
  text-decoration: none;
  color: white;
}

header nav a:hover {
  color: #7EC91B;
}

http://jsfiddle.net/2ns2puuy/

2 ответа 2

1

это ul дает отступ

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

введите сюда описание изображения

добавьте -

header nav ul{
    margin: 0;
}

http://jsfiddle.net/rn5zopvz/

Используйте cssreset - http://cssreset.com

1
  • Спасибо, почему-то в инспекторе фаерфокса ul отображается без отступов
    – C1one_38
    9 окт 2015 в 11:16
1
ul {
margin-top: 0;
}

По умолчанию у списков есть свой margin.

2
  • Спасибо, про это я догадывался, но хотелось бы узнать почему вообще возник этот отступ? Можете в сторону теории меня подтолкнуть?
    – C1one_38
    9 окт 2015 в 10:00
  • Изменил ответ в другую сторону и описал почему так.
    – Moonvvell
    9 окт 2015 в 10:07

Ваш ответ

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

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