Удалить пробел между границей и содержимым

ProgramBox

Удалить пробел между границей и содержимым

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

#html #css

#HTML #css

Вопрос:

Давайте рассмотрим этот простой код:

HTML

  <h2>Some text</h2>

При визуализации отображается пробел между верхними / нижними границами h2 и верхними / нижними границами текста. Есть ли способ удалить этот пробел?

Я смог добиться этого, присвоив фиксированное значение свойству line-height; однако это решение кажется мне слишком «принудительным». Как я могу добиться того же более «естественным» способом?

Ответ №1:

Вы можете установить margin и padding в 0 . Я вставил h2 в div , чтобы было легче увидеть разницу.

 h2.remove-whitespace {
  margin: 0;
  padding: 0;
  line-height: 30px;
  height: 25px;
}

div {
  padding: 0;
  margin-bottom: 5px;
  border: 1px solid black;
}

 <!-- with margin:0;padding:0 -->
<div>
    <h2 class="remove-whitespace">Some text</h2>
</div>

<!-- original -->
<div>
    <h2>Some text</h2>
</div>

1. Спасибо за ваш ответ, @Sumner. Я уже пытался установить поля и отступы равными 0, но некоторые пробелы все еще там (как показано и в вашем фрагменте кода). Чего я пытаюсь добиться, так это того, чтобы верхние / нижние границы тега h2 идеально соответствовали верхним / нижним границам текста без этого «дополнительного» пробела.

2. @GiS91, я немного улучшил его, вручную отредактировав line-height и height , но, вероятно, он никогда не будет идеальным, поскольку сам шрифт имеет встроенные пробелы.

3. Хммм … что я подумал: это вопрос присущих шрифту пробелов. Насколько вам известно, есть ли способ удалить этот «тип» пробелов, отличный от взлома «высоты строки»? Чтобы было понятно: высота строки работает отлично, но, как указывалось ранее, это решение кажется мне слишком «принудительным».

Ответ №2:

этот подойдет.

 <h2 style="margin:0">Some text<h2>

но для наилучшей практики всегда используйте поместить весь ваш CSS-код во внешний файл css или в ваш html-файл в тегах style в head tag.

в вашем внешнем файле css

 h2{
    margin:0;
}

или в самом вашем HTML-файле

поместите код в head тег

 <style>
    h2{
          margin:0;
    }
</style>

Пожалуйста, прочтите это:http://www.w3schools.com/css/css_howto.asp

1. Хотя это самое простое решение, всегда желательно избегать встроенного css, где это возможно.

2. Спасибо за ваш ответ, @Aman. Я уже пытался установить поля (и отступы) равными 0, но некоторые пробелы все еще там. Чего я пытаюсь добиться, так это того, чтобы верхние / нижние границы тега h2 идеально соответствовали верхним / нижним границам текста без этого «дополнительного» пробела.

3. @GiS91 попробуйте это: html, body, h2 { margin: 0px; padding: 0px; border: 0px; }

Ответ №3:

Вы можете добиться этого, удалив поле из элемента H2 с помощью css.

 h2 {
  margin: 0;
}

  <h2>Some text</h2>

Если вы хотите удалить пробел только сверху или снизу <h2> элемента, вы можете использовать margin-top и margin-bottom свойства CSS.

Ответ №4:

элементы заголовка html (например, h1….hx) имеют заранее определенные отступы и поля. Для тестирования вы можете добавить границу к элементам заголовка с помощью css, но здесь это не так. Поэтому просто установите отступы и границы на 0, и все будет работать нормально, но помните, что это не изменит размер шрифта.

Ответ №5:

Это относится к стилям по умолчанию при рендеринге страницы. вы столкнетесь с этой проблемой со всеми тегами HTML.

Пожалуйста, используйте reset.css, чтобы устранить все проблемы со стилем тега по умолчанию.

наслаждайтесь оформлением !! 😀