源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 2327|回复: 0

[CSS/Html] css段落间距怎么设置

[复制链接]

3102

主题

3503

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
272470
发表于 2023-3-30 22:42:04 | 显示全部楼层 |阅读模式

通过CSS设置上下段落之间距离常见有三种方法,分别如下:

一、line-height行高

我们对line-height的值设置越大,段落间距将会增大,同时字与字行距也会增加,不推荐用此line-height样式设置段落间距距离。为了观察效果,我们分别设置CSS line-height为20px与50px对比观察效果。

关键CSS代码:p{line-height:22px}
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>document</title>
  6. <style>
  7. p{
  8.     line-height:30px
  9. }
  10. /* css 注释: 设置行高为30px */
  11. </style>
  12. </head>
  13. <body>
  14. <p>第一段,第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p>
  15. </body>
  16. </html>
复制代码

二、css padding内补白(内边距)

推荐使用padding设置段落上下间距。通过设置上下内补白,内距离即可实现p段落上下间距设置。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>document</title>
  6. <style>
  7. p{
  8.     padding:15px 0
  9.     }
  10. /* css注释: 设置padding为上下15px */
  11. </style>
  12. </head>
  13. <body>
  14. <p>第一段,第一行<br /> 第二行</p>
  15. <p>第二段</p>
  16. <p>第三段</p>
  17. </body>
  18. </html>
复制代码

三、css margin外边距

CSS段落间距调整之margin实现上下段落之间间距距离样式设置,我们知道margin是设置上下左右对象与对象之间距离设置,这里段落也可以使用此css样式实现间距。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>document</title>
  6. <style>
  7.   p{
  8.       margin:10px 0
  9.   }
  10.   /* css注释: 设置margin为对象上下间距10px */
  11.   </style>
  12.   </head>
  13.   <body>
  14.    <p>第一段,第一行<br /> 第二行</p> <p>第二段</p> <p>第三段</p>
  15.    </body>
  16.    </html>
复制代码

以上就是css段落间距怎么设置的详细内容,更多请关注锦尚中国源码论坛其它相关文章!

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-5-28 16:35 , Processed in 0.028369 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明