如何在段落文本周围创建更多空间

Question

只是想知道最好的方法是减少段落文本在我的部分中的跨度。从代码中可以看出，文本几乎占据了整个宽度。但是，我希望它占用更少，并且拥有比两条更多的线。我已经包含了我正在寻找的图像。

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 1

您可以减少段落的宽度，例如与width: 60%;。

但更好的解决方案是使用box-sizing: border-box添加左右填充。这包括填充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>

Answer 2

有几种方法可以做到这一点，但我会将段落包装在div中，并将样式应用于div以减小宽度。

#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;
}

.half-width {
  width: 50%;
}

<section id="section1">
  <h1>WELCOME</h1>
  <div class="half-width">
    <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>
  </div>
</section>

Answer 3

完全删除宽度并添加：

padding-right:150px;
padding-left:150px;

这将“填充”部分框的内部。

Answer 4

#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>