Пробелы вокруг абзацев

ProgramBox

Пробелы вокруг абзацев

Post author:admin
Запись опубликована:13 апреля, 2023
Post category:Вопросы по программированию

#html #css #paragraph

#HTML #css #абзац

Вопрос:

У меня проблема с абзацами. Я получил margin: 0, padding: 0; во всех CSS, но все еще получил этот странный пробел вокруг моего текста.

Вот мой код:

  .advices_container_header span {
        margin: 0;
        padding: 0;
     }

     .advices_container_header p {
        margin: 0;
        padding: 0;
       }

      .advices_container_header_advices {
          display: block;
          margin: 0;
          padding: 0;
          font-family: Open Sans;
          font-size: 56px;
          color: rgba(255,96,0,1);
       }

       .advices_container_header_advices p {
           margin: 0;
           padding: 0;
        }

        .advices_container_header_text {
            display: block;
             margin: 0;
             padding: 0;
             font-family: Open Sans;
             font-size: 18px;
             color: rgba(107,107,107,1);
         }

         .advices_container_header_questionMark {
             margin: 0;
             padding: 0;
             font-family: Open Sans;
             font-size: 48px;
             color: rgba(255,96,0,1);
          }

    <div class="advices_container_header">   
                <p class="advices_container_header_advices">Wskazówki</p>
                <p class="advices_container_header_text">Jak przygotować się do przeprowadzki<span class="advices_container_header_questionMark">?</span></p>
            </div>

У меня нет проблем с другим текстом на сайте, вот почему это странно для меня.

1. Я вижу что-то вроде изображения над текстом. Это может быть поле этого элемента.

2. Пожалуйста, поделитесь своим кодом в виде фрагмента, чтобы мы могли проверить. Кроме того, изображение не очень хорошо проясняет ваш вопрос. Поэтому, пожалуйста, немного уточните вопрос.

Ответ №1:

Это нормально. Каждая строка текста имеет высоту строки:

Высота строки — это расстояние по вертикали между строками текста. В Интернете это равное количество пробелов над текстом и под ним в строке.

В CSS свойство line-height может принимать числовые или процентные значения. Если значение высоты строки не указано или не наследуется, высота строки по умолчанию является нормальной. Обычно это примерно на 20% больше размера шрифта.

Таким образом, правильным ответом было бы установить высоту строки равной 80%. Однако для шрифта, который вы указали в своем примере, кажется, что 80% будет недостаточно. В зависимости от того, что вы хотите вырезать следующим, это должно составлять около 70-72% для вашего шрифта.

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.advices_container_header span {
  margin: 0;
  padding: 0;
}

.advices_container_header p {
  margin: 0;
  padding: 0;
}

.advices_container_header_advices {
  display: block;
  margin: 0;
  padding: 0;
  font-family: Open Sans;
  font-size: 56px;
  color: rgba(255,96,0,1);
  line-height: 72%;
}

.advices_container_header_advices p {
  margin: 0;
  padding: 0;
}

.advices_container_header_text {
  display: block;
  margin: 0;
  padding: 0;
  font-family: Open Sans;
  font-size: 18px;
  color: rgba(107,107,107,1);
}

.advices_container_header_questionMark {
  margin: 0;
  padding: 0;
  font-family: Open Sans;
  font-size: 48px;
  color: rgba(255,96,0,1);
}

 <div class="advices_container_header">  
  <p class="advices_container_header_advices">Wskazówki</p>
  <p class="advices_container_header_text">Jak przygotować się do przeprowadzki<span class="advices_container_header_questionMark">?</span></p>
</div>

Если вы намерены использовать это в качестве логотипа. Я рекомендую вам использовать вместо них изображения SVG.

Ответ №2:

Я думаю, вы можете исправить это с помощью высоты строки, но, полагаю, это правильно по умолчанию, также я бы использовал тег * и установил отступы и поля равными 0, вместо того, чтобы копировать его везде, тег * предназначен для всех HTML-элементов, кстати.

Ответ №3:

Вы можете принудительно установить высоту строки такой же, как размер вашего шрифта, и удалить все лишние поля, отступы и семейство шрифтов:

 * {
    margin: 0;
    padding: 0;
    font-family: "Open Sans";
}

.advices_container_header_advices {
    display: block;
    font-size: 56px;
    line-height: 56px;
    color: rgba(255,96,0,1);
}

.advices_container_header_text {
    display: block;
    font-size: 18px;
    line-height: 18px;
    color: rgba(107,107,107,1);
}

.advices_container_header_questionMark {
    font-size: 48px;
    line-height: 48px;
    color: rgba(255,96,0,1);
}

1. Я использовал высоту строки, и теперь это намного лучше, но вокруг все еще остается немного пробелов.

2.Я использовал высоту строки, и теперь это намного лучше, но вокруг все еще остается немного пробелов.