CODEWITHSUNDEEP
csshtml
DVA
DVA

Reputation: 151

New line break overlaps previous text css

I have this div that contains text. However, when it creates a new line, it overlaps the top text. I am using a font called pageant. However, even if I use a default HTMLfont, the problem still exists.

Here's the code of the DIV:

<div id="scoresDiv" class="scoresDiv" style="text-align:center;width:400px;height:inherit;overflow:hidden;background-color:transparent;color:white;">

<div style="margin-top:200px;font-size:90px;font-family:pageant;background-color:transparent;display: inline-block;">Hello Stackoverflow</div></div>

Here's an image of the problem.enter image description here

Hoping for your response. Thanks!

Upvotes: 1

Views: 4897

Answers (2)

Kheema Pandey
Kheema Pandey

Reputation: 10265

you have to give a line-height property, also in this case I've provided a width also.

<div style="margin-top:200px;font-size:90px;font-family:pageant;background-color:transparent;display: inline-block; line-height:1.4em; width:300px;">Hello Stackoverflow</div>

HERE is a Working Demo.

Upvotes: 5

Vikram Jakkampudi
Vikram Jakkampudi

Reputation: 512

<div id='stackoverflow'>Hello Stackoverflow</div></div>



#stackoverflow{
margin-top:200px;
font-size:90px;
font-family:pageant;
background-color:transparent;
display: inline-block;
line-height:50px;
}

Upvotes: 1

Related Questions