QUICK CSS question - Line height issue

[Pbalazs89]

Hi there,

I made a short video to explain my issue:

I have some text in the video ‘specialis felhasznalas’ which has a very big line height. Well not line height, because changing it does not work. Not margin or padding either. What can cause the space between the lines?

Here’s my entire css that is connected to this part:

ul.category {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

li.categoryli {
  margin: 15px;
  width: 10%;
  text-align: center;
  padding: 0.5em 1.5em;
  background-color: #2db391;
  color: white;
  border-radius: 100px;
}

li.categoryli:hover {
  background: #2b3233;
  transition: 0.5s;
}

li.categoryli a {
  color: white;
  font-size: 70%;
  line-height: 1;
}

Thanks for any tips in advance!

[ruenel]

Hello @Pbalazs89,

Thank you for the very detailed post information. Please be advised that if you put a number for the line-height property, it will be multiplied with the current font-size to set the line height. Please check out this following resources:

• https://www.w3schools.com/cssref/pr_dim_line-height.asp
• https://css-tricks.com/almanac/properties/l/line-height/

Hope this helps.

[Pbalazs89]

Thanks for the help! I looked up the sources that you sent me.
I tried changing both the font size and the line height, but here’s what’s happening. After decreasing it to a certain value it just won’t become smaller.

Any ideas what I may have messed up?

[ruenel]

Hello @Pbalazs89,

Please be advised that the line-height may NOT go smaller than the font size. If you have a font size of 12 pixels, your line height should be at least 12 pixels. Going much lower will overlap the text character.

What should be the possible outcome that you have in mind? Can you please share the url of the page or at least the mock layout your design so that we will have.

Regards.