0

Не могу понять почему при изменении размера шрифта получается отступ.

<div class="top">
    <div class="container">
        <div class="header">
            <p class="phone">+ 7 383 410-55-55</p>
            <p class="schedule">м. Зеленый Слоник, ул, Слоновая, 5, офис 41<br>
                Часы работы: Пн-Пт с 09:00 до 18:00</p>
        </div>
        <div class="repair">
            <p class="repair-up">Ремонт</p>
            <p class="repair-mid">квартир</p>
            <p class="repair-down">под ключ в Новосибирске</p>
        </div>
        <div class="partners">
            <p>С нами работают:</p>
            <div class="partners_box">
                <a href=""><img src="img/alfa.png" alt="Альфа-Банк"></a>
                <a href=""><img src="img/sber.png" alt="Сбер"></a>
                <a href=""><img src="img/2gis.png" alt="2gis"></a>
                <a href=""><img src="img/HeatLife.png" alt="HeatLife"></a>
                <a href=""><img src="img/sbt.png" alt="СБТ"></a>
                <a href=""><img src="img/domru.png" alt="Дом.Ру"></a>
            </div>
        </div>
    </div>

Здесь всё видно:https://jsfiddle.net/AWEyeforaneye/ngm479ut/1/

1

1 ответ 1

1

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

Как видно на картинке, это проблема кроется не в теге p, а в используемом шрифте.

Как вариант использовать отрицательный text-indent:

* {
  margin: 0;
  padding: 0;
}


body {
  color: #160702;
  font-family: Verdana, sans-serif;
}

.container {
  width: 960px;
  margin: 0 auto;
}

.top {
  height: 567px;
  background-image: url(../img/firstbg.jpg);
  background-position: fixed;
}

.header {
  text-align: right;
  line-height: 1.76;
  padding-top: 20px;
}

.phone {
  font-size: 25px;
  font-weight: bold;
}

.schedule {
  font-size: 12px;
  line-height: 1.5;
}

.repair {
  font-size: 98px;
  font-weight: bold;
  color: #000000;
  margin-top: 60px;
}

.repair-up {
  height: 74px;
  margin-bottom: 13px;
  /* --- */
  text-indent: -9px;
}

.repair-mid {
  margin-bottom: 18px;
  /* --- */
  text-indent: -.08em;
}

.repair-down {
  font-size: 32px;
  margin-bottom: 52px;
  /* --- */
  text-indent: -.08em;
}

.partners {
  font-size: 18px;
  line-height: 1.44;
}

.partners_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 524px;
  height: 24px;
  margin-top: 27px;
}
    <div class="top">
      <div class="container">
        <div class="header">
          <p class="phone">+ 7 383 410-55-55</p>
          <p class="schedule">м. Зеленый Слоник, ул, Слоновая, 5, офис 41<br>
            Часы работы: Пн-Пт с 09:00 до 18:00</p>
        </div>
        <div class="repair">
          <p class="repair-up">Ремонт</p>
          <p class="repair-mid">квартир</p>
          <p class="repair-down">под ключ в Новосибирске</p>
        </div>
        <div class="partners">
          <p>С нами работают:</p>
          <div class="partners_box">
            <a href=""><img src="img/alfa.png" alt="Альфа-Банк"></a>
            <a href=""><img src="img/sber.png" alt="Сбер"></a>
            <a href=""><img src="img/2gis.png" alt="2gis"></a>
            <a href=""><img src="img/HeatLife.png" alt="HeatLife"></a>
            <a href=""><img src="img/sbt.png" alt="СБТ"></a>
            <a href=""><img src="img/domru.png" alt="Дом.Ру"></a>
          </div>
        </div>
      </div>

2
  • Спасибо Вам! Очень помогли. 24 янв 2021 в 12:50
  • @AWEyeforaneye, если мой ответ Вам помог - отметьте его галочкой как правильный.
    – De.Minov
    25 янв 2021 в 6:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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