这篇文章主要介绍css设置段落间距的方法是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
那么怎样使用css margin 属性设置文字的段落间距?
css margin可以实现上下段落之间间距距离样式的设置，我们知道margin是设置上下左右对象与对象之间距离设置，这里段落也可以使用此css样式实现间距。
下面我们通过简单的代码示例，为大家详细解说关于css margin 属性设置和调整文字段落间距的方法！
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin设置段落间距</title>
<style>
.cx{
margin: 20px 0;
}
/* css注释： 设置margin为对象上下间距10px */
</style>
</head>
<body>
<p>第一段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第二段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p class="cx">第三段，设置了间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
</body>
</html>效果图：
其实，margin 属性 是一个简写属性，可以设置元素的所有外边距，使用margin 属性可以同时设置段落的上下间距。我们也可以一个一个设置外边距，设置一个段落的上间距或下间距，方法如下：
margin-top：设置元素的上外边距。
margin-bottom：设置元素的下外边距。
下面我们通过简单的代码示例，为大家详细解说实现方法！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin设置段落间距</title>
<style>
*{margin: 0px;padding: 0px;}
.a1{
margin-top: 20px;
}
.a2{
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>第一段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p class="a1">第二段，单独设置上间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第三段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p class="a2">第四段，单独设置下间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
<p>第五段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！</p>
</body>
</html>效果图：
以上是css设置段落间距的方法是什么的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
