0

I'm having rows like these items as h2

height: auto;
min-height: 50px;
line-height: 50px;

But if I have a multi-line h2 it looks so bad. How can I decrease the line-height of h2 if it has multi-lines to be 30px instead of 50?

enter image description here

PHP User
  • 2,350
  • 6
  • 46
  • 87
  • 3
    why you don't keep both at 30px and consider padding to increase the space – Temani Afif Nov 30 '19 at 13:25
  • 1
    You better not use `line-height` to create margin between text and border. Use `padding` instead so you have separate control of padding and line space. – Kayasit R. Nov 30 '19 at 13:25

3 Answers3

0

If you know the H2 that will have 2 lines, you can give them class or ID and target them specifically with line-height of 30px,.. if the H2 becomes two lines when the screen changes(of view), you can change line-height in media query css file for big, small or medium screens!!

Dan_DaCong
  • 1
  • 1
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/32999049) – Al Foиce ѫ Oct 27 '22 at 08:47
-1

Okay so. If you want to increase space between lines you can use line-height.

It is used to define the minimal height of line boxes within the element, but here is the thing. If you put it on h2 element it will be applied to every h2 element on your webpage or website.

Here are a few solutions to consider.

If you want bigger line-height for the element you can give that element a specific class and define line-height for that class, and whenever you need that line-height just add class to the element. This way you will reuse classes and write less CSS.

If you want to increase space between elements you can do this in two ways. Margins and paddings. These are really simple.

If you want to push element down you can give margin-top: 10px to it or margin-bottom: 10px to element above it, or if you have 3 elements (like in your case) you can give 

margin-top: 10px;
margin-bottom: 10px;

to middle element and it will push away top and bottom elements for 10px. Same is with padding.

There are lots of ways to achieve the same thing in programming. First, sit down and think about what is easiest to write but is readable and scalable.

Happy coding :)

Mileta Dulovic
  • 1,036
  • 1
  • 14
  • 33
-3

Changed min-height to 30 and line-height to 30 with Padding top and bottom

PHP User
  • 2,350
  • 6
  • 46
  • 87