Question 187480 in Html Question posted in
Some basic documentation can be found here.

i am facing an issue with the formatting of my output when using the <br> tag in HTML

I have been having a problem with a practice question. so you can see that in I have all the thing right from HTML to CSS but the output is now showing in a right way.when i use
tag then the output show like this HTMl and CSS output image in the browser but when i don’t use 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>
Tags:

4

Answers


  1. 0

    Maybe text text-allign:center is the problem and add some border
    Im new to this first time here

    Login or Signup to reply.
  2. 0

    Use "<br/>" instead of "<br>" in heading

    Apna
    College

    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
  4. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search