如何使用div+css样式设置p段落之间的上下间距

如题所述

第1个回答  推荐于2018-04-19
案例一、对margin上下设置为0 - TOP
<</span>html>
<</span>head>
<</span>meta charset="utf-8" />
<</span>title>p行距实例 在线演示 DIVCSS5</</span>title>
<</span>style>
p{ line-height:20px}
.divcss5-a p{ margin:0 auto}
</</span>style>
</</span>head>
<</span>body>
<</span>div class="divcss5-a">
<</span>p>第一段</</span>p>
<</span>p>第二段<</span>br />第二段第二行</</span>p>
<</span>p>第三段</</span>p>
</</span>div>
</</span>body>
</</span>html>
设置margin-top为0,margin-bottom为0
案例二、对margin上下设置为30px - TOP
<</span>html>
<</span>head>
<</span>meta charset="utf-8" />
<</span>title>p行距实例 在线演示 DIVCSS5</</span>title>
<</span>style>
p{ line-height:20px}
.divcss5-b p{ margin:30px auto}
</</span>style>
</</span>head>
<</span>body><</span>div class="divcss5-b">
<</span>p>第一段</</span>p>
<</span>p>第二段<</span>br />第二段第二行</</span>p>
<</span>p>第三段</</span>p>
</</span>div>
</</span>body>
</</span>html>
这里对对象".divcss5-b"设置了CSS margin:30px auto相当于设置margin-top为30px、margin-bottom为30px
案例三、对margin上下设置为0,padding上下为20px - TOP
<</span>html>
<</span>head>
<</span>meta charset="utf-8" />
<</span>title>p行距实例 在线演示 DIVCSS5</</span>title>
<</span>style>
p{ line-height:20px}
.divcss5-c p{ margin:0 auto; padding:20px 0}
</</span>style>
</</span>head>
<</span>body>
<</span>div class="divcss5-c">
<</span>p>第一段</</span>p>
<</span>p>第二段<</span>br />第二段第二行</</span>p>
<</span>p>第三段</</span>p>
</</span>div>
</</span>body>
</</span>html>
以上设置了margin-top和margin-bottom均为0,然后我们设置padding-top和padding-bottom值为20px。本回答被网友采纳