段落のテキストの周囲に余分なスペースを作成する方法

Question

段落のテキストが自分のセクションにどのくらい広がっているかを減らすことが最善の方法であると思うだけです。コードからわかるように、テキストはほぼ全幅を占めています。しかし、私はそれを少なくし、2つ以上の行を持っていることを望みます。私は私が探しているもののイメージを含んでいます。

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>