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

标题: css段落间距怎么设置 [打印本页]
作者: 洪七公    时间: 2023-3-30 22:42
标题: css段落间距怎么设置

通过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段落间距怎么设置的详细内容，更多请关注锦尚中国源码论坛其它相关文章！





欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3