css如何设置段落间距？margin属性设置段落间距（代码实例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css如何设置段落间距？margin属性设置段落间距（代码实例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3340字，纯文字阅读大概需要5分钟。
内容图文
段落间距是网页设计里一个提升文章阅读体验的重要因素。但网页排版不想Word那样简单，而作为网页设计师，为了读者的良好阅读体验，我们必须为文章的每个小标题和段落都预留一定的空间，用css有效率地设置段落间距。本章就给大家介绍css margin 属性是怎样设置段落间距。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。那么怎样使用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视频教程！
相关推荐：
php公益培训视频教程
css如何使用内边距来调整段落间距？（代码实例）
css如何设置行间距？css文本文字的行间距设置（代码实例）
css如何设置文字间距？word-spacing属性与letter-spacing属性的简单比较
以上就是css如何设置段落间距？margin 属性设置段落间距（代码实例）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的css如何设置段落间距？margin属性设置段落间距（代码实例）全部内容，希望文章能够帮你解决css如何设置段落间距？margin属性设置段落间距（代码实例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。