CODEWITHSUNDEEP
htmlcss
randomcoder66785
randomcoder66785

Reputation: 68

How do I fix my line breaks when they dont work as intended?

I'm trying to create a 3 paragraph line-break included div with a fixed width and height, but it produces a funny result....

Intended result:

(paragraph 1)

(paragraph 2)

(paragraph 3)

Reality:

[big blank space](paragraph 1)

(paragraph 2)

(paragraph 3)

    .parafix{
      width:400px;
      height:600px;
      margin: 0 auto;
      padding-left:50px;
      padding-top:50px;
    }
 <div class="parafix">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis eros, euismod et auctor at, viverra non ipsum. Fusce tempor augue vitae felis bibendum porttitor. Nulla facilisi. Nam eu diam tempus, consectetur nibh tincidunt, consequat urna. Sed fringilla ac ligula vel pretium.</p><br>
      <p>Nulla non libero non quam finibus dictum. Suspendisse non urna laoreet, sodales justo eu, lobortis ligula. Cras finibus turpis eget ex vulputate, eu ultrices turpis aliquam. Phasellus at neque vulputate, iaculis sem a, condimentum urna. Nullam gravida vitae nisl a sollicitudin. Vivamus gravida pharetra faucibus.</p><br>
      <p>Praesent dignissim congue sodales. Sed tempor risus nec vulputate finibus. Mauris interdum nibh non dolor venenatis, quis accumsan ipsum gravida.</p>
    </div>

Upvotes: 0

Views: 44

Answers (1)

Zakk
Zakk

Reputation: 2063

The problem lies in this line:

padding-top:50px;

All your .parafixes will have a (big blank) 50-pixel-top padding. Change it to a lower (or null) value:

.parafix {
  width: 400px;
  height: 600px;
  margin: 0 auto;
  padding-left: 50px;
  padding-top: 10px; /* Reduce the padding to 10px or to whatever you like. Or remove it completely. */
}
<div class="parafix">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam turpis eros, euismod et auctor at, viverra non ipsum. Fusce tempor augue vitae felis bibendum porttitor. Nulla facilisi. Nam eu diam tempus, consectetur nibh tincidunt, consequat urna.
    Sed fringilla ac ligula vel pretium.</p><br>
  <p>Nulla non libero non quam finibus dictum. Suspendisse non urna laoreet, sodales justo eu, lobortis ligula. Cras finibus turpis eget ex vulputate, eu ultrices turpis aliquam. Phasellus at neque vulputate, iaculis sem a, condimentum urna. Nullam gravida
    vitae nisl a sollicitudin. Vivamus gravida pharetra faucibus.</p><br>
  <p>Praesent dignissim congue sodales. Sed tempor risus nec vulputate finibus. Mauris interdum nibh non dolor venenatis, quis accumsan ipsum gravida.</p>
</div>

Upvotes: 1

Related Questions