CODEWITHSUNDEEP
htmlparagraph
Fluxcapacitor
Fluxcapacitor

Reputation: 393

Why does text in paragraph overlap and not create a new line?

I have a division set up with a heading and paragraph. When I load the page, the text overlaps as if it's run to the bottom of the div and has nowhere to go. My assumption was that the div would expand vertically as text was added to it, but it doesn't (not in my case, at least). Important to know that I changed the font from a smaller (Times New Roman) to larger (Georgia). After this change the text problem happened. Thank you.

<div id="fall">
  <h3> Exile L'Empereur </h3>
  <br>
  <p>  Napoleon was exiled to Elba. After Waterloo he was exiled to St. Helena. </p>
  <p>  Napoleon was exiled to Elba. After Waterloo he was exiled to St. Helena. </p>
  <p>  Napoleon was exiled to Elba. After Waterloo he was exiled to St. Helena. </p>

==============

 #fall {
  padding: 20px;
  line-height: 5px;
  background-image: url(../images/fleurdelis.png);
  background-position: top right;   
  background-repeat: no-repeat;
  background-color: #CBEDF2;
  background-size: 64px;
  text-align: center;
  border-radius: 0px 15px 0px;
  width: 500px;
  margin-left: 20%;
  border: 2px solid black;
 }

Upvotes: 1

Views: 4110

Answers (2)

hello
hello

Reputation: 1

set the alignment of paragraph. increase the margin of the text.

To find more about paragraph visit the link.

http://entertainment7899.blogspot.com/2015/08/how-to-create-paragraph-with-html.html

Upvotes: 0

Kerstomaat
Kerstomaat

Reputation: 713

You have set the line-height to small. I'm assuming you thought it is the height between two lines of text, but it's not. Check the example at https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Upvotes: 2

Related Questions