css设置段落间距的方法是什么

这篇文章主要介绍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>

效果图：

css设置段落间距的方法是什么

其实，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设置段落间距的方法是什么

以上是css设置段落间距的方法是什么的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

分享标题：css设置段落间距的方法是什么
分享地址：https://www.cdcxhl.com/article4/jcdioe.html

成都网站建设公司_创新互联，为您提供关键词优化、微信公众号、移动网站建设、网站导航、网站收录、定制开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容