css中p段落行高行距如何设置

发布时间:2022-03-04 15:23:10 作者:iii
来源:亿速云 阅读:321

这篇文章主要介绍了css中p段落行高行距如何设置的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css中p段落行高行距如何设置文章都会有所收获,下面我们一起来看看吧。

因为p之间上下距离实现使用margin样式和padding决定,而line-height也有一定关系。接下来DIVCSS5通过实例方法为大家介绍p段落之间行距,通过css实例掌握对p行距设置。

css+div案例描述,为了观察到效果,我们设置四个DIV 盒子对象,分别里面加入p段落,同时对p段落设置不同的行距观察他们效果,提供效果找出规律从而掌握css设置p行距。

命名分别为".亿速云-a"、".亿速云-b"、".亿速云-c"、".亿速云-d"

在p段落标签默认样式中,padding的值默认为0。同时DIVCSS5对p文字line-height设置为20px

案例一、对margin上下设置为0 

1、完整css+div html代码如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>p行距实例 在线演示 DIVCSS5</title> <style> p{ line-height:20px} .亿速云-a p{ margin:0 auto} </style> </head> <body> <div class="亿速云-a"> <p>第一段</p> <p>第二段<br />第二段第二行</p> <p>第三段</p> </div> </body> </html>

设置margin-top为0,margin-bottom为0,(了解margin auto作用)
2、p行距效果截图

css中p段落行高行距如何设置
p行距实现距离为零截图

通过以上实例观察出如果将margin-top和margin-bottom的值设置为0,那么p段落行距就不存在了,效果就与line-height设置行距相同了。

案例二、对margin上下设置为30px 

1、完整的html源代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>p行距实例 在线演示 DIVCSS5</title> <style> p{ line-height:20px} .亿速云-b p{ margin:30px auto} </style> </head> <body><div class="亿速云-b"> <p>第一段</p> <p>第二段<br />第二段第二行</p> <p>第三段</p> </div> </body> </html>

这里对对象".亿速云-b"设置了CSS margin:30px auto相当于设置margin-top为30px、margin-bottom为30px

2、div+css实例截图

css中p段落行高行距如何设置
通过多margin设置调节行距

从以上案例我们可以看出通过margin设置可以实现p段落行距。

案例三、对margin上下设置为0,padding上下为20px    

1、完整实例HTML代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>p行距实例 在线演示 DIVCSS5</title> <style> p{ line-height:20px} .亿速云-c p{ margin:0 auto; padding:20px 0} </style> </head> <body> <div class="亿速云-c"> <p>第一段</p> <p>第二段<br />第二段第二行</p> <p>第三段</p> </div> </body> </html>

以上设置了margin-top和margin-bottom均为0,然后我们设置padding-top和padding-bottom值为20px。

2、实例效果截图

css中p段落行高行距如何设置
对p实例截图

通过以上案例可以看出对p设置padding样式依然可以实现行距间距设置。

案例四、我们不设置margin也不设置padding样式    

我们不对p设置margin样式和padding样式,意思就对p不设置样式看看默认P样式行距效果。

1、完成DIV CSS实例代码:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>p行距实例 在线演示 DIVCSS5</title> <style> p{ line-height:20px} .亿速云-d p{ } </style> </head> <body> <div class="亿速云-d"> <p>第一段</p> <p>第二段<br />第二段第二行</p> <p>第三段</p> </div> </body> </html>

不设置样式即体现p默认样式

2、css实例截图

css中p段落行高行距如何设置
不对p设置任何样式默认行距效果截图

此案例说明如果对p不设置任何样式,即观察出p默认是有一定Margin-top和margin-bottom值,也就一定间距。

关于“css中p段落行高行距如何设置”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“css中p段落行高行距如何设置”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. 如何在css中设置行高
  2. css设置行距的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:如何实现div文字垂直居中

下一篇:css的td宽度怎么定义与设置

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》