本篇内容介绍了“CSS如何设置段落之间的距离”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！通过CSS设置上下段落之间距离常见有三种方法，分别
本篇内容介绍了“CSS如何设置段落之间的距离”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
通过CSS设置上下段落之间距离常见有三种方法，分别如下：
一、line-height行高
我们对line-height的值设置越大，段落间距将会增大，同时字与字行距也会增加，不推荐用此line-height样式设置段落间距距离。为了观察效果，我们分别设置CSS line-height为20px与50px对比观察效果。
关键CSS代码：p{line-height:22px}
line-height为20px案例，DIV+CSS代码：
<!DOCTYPE html> <html> <head> <meta Http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>段落案例</title> <style> p{ line-height:20px} </style> </head> <body> <p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> </body> </html>二、css padding内补白（内边距）
推荐使用padding设置段落上下间距。通过设置上下内补白，内距离即可实现p段落上下间距设置。
设置上下内补白为10px(padding:10px 0)
完整css+div代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>段落案例</title> <style> p{ padding:10px 0} </style> </head> <body> <p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> </body> </html>三、css margin外边距
CSS段落间距调整之margin实现上下段落之间间距距离样式设置，我们知道margin是设置上下左右对象与对象之间距离设置，这里段落也可以使用此css样式实现间距。
css设置margin上下间距为10px,html+css代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>段落案例</title> <style> p{margin:10px 0} </style> </head> <body> <p>第一段，第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p> </body> </html>“css如何设置段落之间的距离”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
--结束END--
本文标题: css如何设置段落之间的距离
本文链接: https://www.lsjlt.com/news/346966.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-22
2024-05-22
2024-05-22
2024-05-22
2024-05-22
2024-05-22
2024-05-22
2024-05-22
2024-05-22
2024-05-22
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0