OJM OJM - 3 months ago 10
HTML Question

How to create more space around paragraph text

Just wondering what the best way is to reduce how much the paragraph text spans in my section. As you can see from the code, the text takes up nearly the whole width. However, I would like it to take up less and have more lines than two. I have included an image of what I am looking for. This is an example of what I am looking for.

https://jsfiddle.net/cabtjsky/

<h1>WELCOME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus est justo, sit amet sodales erat gravida nec.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris enim sapien, iaculis a auctor vitae, eleifend in augue.
Mauris turpis ligula, tincidunt ut augue et, dictum consequat nisl.</p>
</section>

#section1{
height:auto;
width:100%;
background-color:green;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding-top:100px;
padding-bottom:100px;
text-align:center;
}

Answer

You can just reduce the width of the paragraph, e.g. with width: 60%;.

But a better solution would be to add left and right padding, with a box-sizing: border-box. This includes the padding space into your width: 100%:

#section1 {
  height: auto;
  width: 100%;
  background-color: green;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 100px;
  text-align: center;
  box-sizing: border-box;
}
<section id="section1">
  <h1>WELCOME</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus est justo, sit amet sodales erat gravida nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris enim sapien, iaculis a auctor vitae, eleifend in augue. Mauris turpis ligula, tincidunt ut augue et, dictum consequat nisl.</p>
</section>

Comments