段落间距是网页设计里一个提升文章阅读体验的重要因素。但网页排版不想Word那样简单，而作为网页设计师，为了读者的良好阅读体验，我们必须为文章的每个小标题和段落都预留一定的空间，用css有效率地设置段落间距。本章就给大家介绍css margin 属性是怎样设置段落间距。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

那么怎样使用css margin 属性设置文字的段落间距?

css margin可以实现上下段落之间间距距离样式的设置，我们知道margin是设置上下左右对象与对象之间距离设置，这里段落也可以使用此css样式实现间距。

下面我们通过简单的代码示例，为大家详细解说关于css margin 属性设置和调整文字段落间距的方法！

margin设置段落间距

.cx{

margin: 20px 0;

}

/* css注释： 设置margin为对象上下间距10px */

第一段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！

第二段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！

第三段，设置了间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！

效果图：

其实，margin 属性 是一个简写属性，可以设置元素的所有外边距，使用margin 属性可以同时设置段落的上下间距。我们也可以一个一个设置外边距，设置一个段落的上间距或下间距，方法如下：

margin-top：设置元素的上外边距。

margin-bottom：设置元素的下外边距。

下面我们通过简单的代码示例，为大家详细解说实现方法！

margin设置段落间距

*{margin: 0px;padding: 0px;}

.a1{

margin-top: 20px;

}

.a2{

margin-bottom: 20px;

}

第一段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！

第二段，单独设置上间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！

第三段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！

第四段，单独设置下间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！

第五段，没有设置间距。我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！我是一段测试代码！

效果图：

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问CSS视频教程！

相关推荐：