在HTML里p段落行高行距怎么设置

怎么样设置p段落之间的上下间距？哪些样式能够控制<p>之间行距距离呢？css行高怎么写？今天我们来把这个P段落研究个明明白白，让大家彻底掌握p行距行高样式。

1、完整css+div html代码如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示</title> 
<style> 
p{ line-height:20px} 
.div-a p{ margin:0 auto} 
</style> 
</head> 
<body> 
<div class="div-a"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

设置margin-top为0,margin-bottom为0,（了解margin auto作用）

通过以上实例观察出如果将margin-top和margin-bottom的值设置为0，那么p段落行距就不存在了，效果就与line-height设置行距相同了。

案例二、对margin上下设置为30px

1、完整的html源代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示</title> 
<style> 
p{ line-height:20px} 
.div-b p{ margin:30px auto} 
</style> 
</head> 
<body><div class="div-b"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

这里对对象".div-b"设置了CSS margin:30px auto相当于设置margin-top为30px、margin-bottom为30px

通过多margin设置调节行距

从以上案例我们可以看出通过margin设置可以实现p段落行距。

案例三、对margin上下设置为0,padding上下为20px

1、完整实例HTML代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示 </title> 
<style> 
p{ line-height:20px} 
.div-c p{ margin:0 auto; padding:20px 0} 
</style> 
</head> 
<body> 
<div class="div-c"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

以上设置了margin-top和margin-bottom均为0，然后我们设置padding-top和padding-bottom值为20px。

通过以上案例可以看出对p设置padding样式依然可以实现行距间距设置。

案例四、我们不设置margin也不设置padding样式

我们不对p设置margin样式和padding样式，意思就对p不设置样式看看默认P样式行距效果。

1、完成DIV CSS实例代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>p行距实例 在线演示 </title> 
<style> 
p{ line-height:20px} 
.div-d p{ } 
</style> 
</head> 
<body> 
<div class="div-d"> 
<p>第一段</p> 
<p>第二段<br />第二段第二行</p> 
<p>第三段</p> 
</div> 
</body> 
</html>

不设置样式即体现p默认样式。

对于P段落的介绍就这么多，更多精彩请关注Gxl网其它相关文章！