Как удалить пробелы из элементов заголовка?

Question

Я хочу выровнять слова в этом div с изображением в div рядом с ним, но сверху и снизу моих элементов h1 и h3 есть пробелы. Я использую flexbox, чтобы выровнять их по вертикали и равномерно выравнивать контент с пространством. Я указал в CSS, чтобы удалить любые поля или отступы в элементах заголовка. Я застрял в этом вопросе. Я приложил снимок экрана Firefox, чтобы объяснить возникшую у меня проблему.

grid-area: card-description;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: normal;
}

#card-description h1, h3 {
    line-height: normal;
    margin: 0;
    padding: 0;
}```

  [1]: https://i.stack.imgur.com/RFwJw.png

Answer 1

Текст отображается в поле (области содержимого) с интерлиньяжем, который вызывает пробел. Зазор естественный и дает тексту передышку.

Для выравнивания по краям, как в вашем случае, вы можете удалить зазор с помощью отрицательного вертикального поля или отступа, чтобы «сжать» контейнер:

   padding-top: -10px;      /* adjust the value to fit your layout */
   padding-bottom: -10px;

И / или применить отрицательное поле к содержащемуся тексту (margin-top для h1 и margin-bottom для h3).

Альтернативный подход, который вы можете попробовать, - уменьшить line-height текст (эффективное удаление интерлиньяжа)

h1 {
   line-height: 1;   /* or even 0.8 for tighter distance */
}

Но это имеет смысл только для однострочного текста (например, вашего h1), потому что все текстовые строки будут сжаты вместе, возможно, не то, что вы хотите.

Answer 2

@leonking93 there is no need for you to give all the four properties 0px you can simply do.

margin: 0;
padding:0; <<<<< this is equivalent to what you have done.

As far as you question goes you can give line height to the the text element this will solve you issue.

 line-height: normal

// You can give the value for this in many 
// forms. You can go through the 
// below given link.


Visit https://www.w3schools.com/cssref/pr_dim_line-height.asp