0

I have been having a problem with a practice question. so you can see that in I have all the things right from HTML to CSS but the output is now showing in the right way. When I use the <br> tag then the output show like this HTMl and CSS output image in the browser but when I don't use the <br> tag the output is Another HTMl and CSS output image in the browser

h1 {
  font-family: league spartan;
  color: #ffa511;
  text-align: center;
  font-size: 55px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.5px;
  text-decoration: teal double underline;
  text-transform: uppercase;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <h1>Apna <br> College</h1>
</body>

</html>
abdou_dev
  • 47
  • 5
Prateek Singh
  • 3
  • 3
  • That looks like a tiny line height. Is it a typo? Did you mean em rather than px for example? – A Haworth Jun 16 '23 at 05:40
  • yes, when I use **em** instead of px it works i get the desired result. do you know why is it happing? – Prateek Singh Jun 16 '23 at 06:18
  • If you have a line-height that is small like your 1.5px then that is, well, the line height, so the next line starts just a tiny bit down from the previous line so they overlap. You probably want to leave out the unit in which case the 1.5 is relative to the current font size. – A Haworth Jun 16 '23 at 07:26

2 Answers2

0

If I'm not mistaken the line height is your problem since the 1.5px is not after the font height making them overlap, try getting rid of the line height property or use another value taking into account your font size.

ErnuB
  • 46
  • 7
  • the main problem is the px unit I don't know why this happing but when I remove px from the line-height property I get the desired result. – Prateek Singh Jun 16 '23 at 06:15
  • Line height property works like that, if you don't use an unit it will use it as a multiplier of it's own unit based on the font size, so using line-height: 1.5; means 1.5 times the regualr height for the font size, when you use px as a unit then you have the next line after the break 1.5 pixels from the previous line making them overlap. Here is more on the subject https://developer.mozilla.org/en-US/docs/Web/CSS/line-height – ErnuB Jun 16 '23 at 06:29
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 17 '23 at 01:31
0

To achieve line breaks without causing overlapping between two words, you can make use of CSS properties to control the spacing and layout. In this case, you can use the display property with a value of block for the <h1> element and adjust the line height accordingly. Here's an updated CSS code:

h1 {
  font-family: league spartan;
  color: #ffa511;
  text-align: center;
  font-size: 55px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.2; /* Adjust this value as needed */
  text-decoration: teal double underline;
  text-transform: uppercase;
  display: block;
}

By setting display: block; the <h1> element will take up the full width available and create a new line for each line break (in this case, the <br> tag). Adjusting the line-height property to a suitable value will control the spacing between the lines. You can experiment with different values to achieve the desired appearance.

abdou_dev
  • 47
  • 5
  • I just removed the px unit from the line height and now I can get the desired result so anyone knows why this is happing? i don't need to use the display property – Prateek Singh Jun 16 '23 at 06:13
  • In your case, removing the `px` unit from the `line-height` property make it a unitless value, and as a result, the line height is calculated based on a multiple of the font size. This can help avoid the overlap between the words when using the `
    ` tag.By not explicitly setting the `display` property to `block`, the default behavior of the `

    ` element is preserved, which is usually `display: block` by default.

     – abdou_dev Jun 16 '23 at 06:24