如何在段落文本週圍創建更多空間

想知道最好的方法是如何減少段落文本在段落中的分佈範圍。從代碼中可以看到，文本幾乎佔據了整個寬度。但是，我希望它佔用更少，並且比兩行更多。我已經包含了我正在尋找的圖像。如何在段落文本週圍創建更多空間

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

來源

2016-08-16 OJM

你可以只減少段落，例如寬度與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>

來源

2016-08-16 23:02:00 andreas

值得一提的是應用全局樣式這樣可以導致非常凌亂CSS的道路。最好是創建明智的，可重用的類，而不是盲目地將樣式應用於當時的任何東西。 – TW80000

這只是一個例子，但你是對的。使用可重用的類是更好的方法。無論如何，我添加了填充和邊框的解決方案，這是更好的解決方案。當然是 – andreas

。我認爲填充是一個非常好的解決方案。 – TW80000

有幾種方法可以做到這一點，但我想包在一個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>

來源

2016-08-16 23:03:10 TW80000

刪除寬度完全並添加：

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

這將「墊」的一節箱的內部。

來源

2016-08-16 23:04:14 PGilm

或者更簡單：'padding：0 150px;'（DRY） – Aziz

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

來源

2016-08-28 03:07:34 bishop800

如何在段落文本週圍創建更多空間

回答

相關問題