css段落间怎么设置距离?

css段落间怎么设置距离?下面本篇文章就来给大家介绍一下使用CSS设置段落距离的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

1、使用line-height属性设置

line-height 属性设置行间的距离(行高)。不允许使用负值。

line-height属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

示例:

<DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			.p1{
				line-height: 50px;
			}
		</style>
			
	</head>

	<body>
		<p>测试文本!</p>
		<p>测试文本!</p>
		<p class="p1">测试文本!</p>
		<p>测试文本!</p>
	</body>

</html>

2、使用css padding内边距

padding属性可以设置元素所有内边距的宽度,或者设置各边上内边距的宽度。

行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

.p1{
padding:10px 0;
}

3、css margin外边距

margin属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

.p1{
margin:10px 0;
}

总结:

文章分段,一般使用html p标签,而对分段间距设置我们推荐使用padding和margin实现,这样可轻松调间距距离,实现段与段之间距离排版美化。

更多CSS相关知识,可访问 CSS教程 !!

以上就是css段落间怎么设置距离?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读