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

问题描述：

想知道最好的方法是如何减少段落文本在段落中的分布范围。从代码中可以看到，文本几乎占据了整个宽度。但是，我希望它占用更少，并且比两行更多。我已经包含了我正在寻找的图像。如何在段落文本周围创建更多空间

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

答

你可以只减少段落，例如宽度与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>

值得一提的是应用全局样式这样可以导致非常凌乱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>

答

删除宽度完全并添加：

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

这将 “垫” 的一节箱的内部。

或者更简单：'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>

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

相关推荐