css中p间距怎么设置?

来自:互联网
时间:2019-11-10
阅读:

在html网页中,我们看到文章段落使用p标签后上下段落之间会有行间隔距离,这里要介绍是p与p段落行间距离如何调整设置?

一、使用CSS line-height设置p行间距

使用CSS行高样式line-height可以设置调整p行间距,但是同时会影响每行文字间的上下间距,所以使用line-height虽然可以用来设置html p行距离间隔,但是不是很实用,一般line-height只设置上下文字间间距。

二、使用margin实现p与p上下行间距改变

1、实现p与p上下行间距与br换行一样零距离

1)、关键html p行间距代码:

p{margin:0 auto}

解释:对p设置上下间距为0,左右自动间距。

2)、p行间距离设置为0完整代码

<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>html p段落行间距CSS设置 ThinkCSS</title>
    <style>p{ margin:0 auto} /* 设置p上下距离为0,左右自动 */</style></head>
  
  <body>
    <p>第一段落P测试内容
      <br />第一段第二排内容</p>
    <p>第二段落P测试内容
      <br />第二段第二排内容</p>
    <p>第三段落P测试内容
      <br />第三段第二排内容</p>
   </body>

</html>

效果如下:

1.jpg

返回顶部
顶部