在HTML里p段落行高行距怎么设置

那么我们为大家介绍如何通过CSSyangshi_10628_1.html' target='_blank'>CSS样式设置p段落上下行距，而p是文章段落标签，控制p段落行距的css div属性有：

1、css line-height

2、margin

3、padding

相关与间距行距教程

1、css文字行间距

2、css 字间距

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

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

命名分别为 .div-a 、 .div-b 、 .div-c 、 .div-d

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

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

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

 !DOCTYPE html  html  head  meta charset= utf-8 /  title p行距实例 在线演示 /title  style p{ line-height:20px} .div-a p{ margin:0 auto}  /style  /head  body  div >
设置margin-top为0,margin-bottom为0,（了解margin auto作用）
通过以上实例观察出如果将margin-top和margin-bottom的值设置为0，那么p段落行距就不存在了，效果就与line-height设置行距相同了。
案例二、对margin上下设置为30px 
1、完整的html源代码
 !DOCTYPE html  html  head  meta charset= utf-8 /  title p行距实例 在线演示 /title  style p{ line-height:20px} .div-b p{ margin:30px auto}  /style  /head  body div >
这里对对象 .div-b 设置了CSS margin:30px auto相当于设置margin-top为30px、margin-bottom为30px
通过多margin设置调节行距
通过多margin设置调节行距
从以上案例我们可以看出通过margin设置可以实现p段落行距。
案例三、对margin上下设置为0,padding上下为20px 
1、完整实例HTML代码
 !DOCTYPE html  html  head  meta charset= utf-8 /  title p行距实例 在线演示 /title  style p{ line-height:20px} .div-c p{ margin:0 auto; padding:20px 0}  /style  /head  body  div >
以上设置了margin-top和margin-bottom均为0，然后我们设置padding-top和padding-bottom值为20px。
通过以上案例可以看出对p设置padding样式依然可以实现行距间距设置。
案例四、我们不设置margin也不设置padding样式 
我们不对p设置margin样式和padding样式，意思就对p不设置样式看看默认P样式行距效果。
1、完成DIV CSS实例代码：
 !DOCTYPE html  html  head  meta charset= utf-8 /  title p行距实例 在线演示 /title  style p{ line-height:20px} .div-d p{ }  /style  /head  body  div >
不设置样式即体现p默认样式。
对于P段落的介绍就这么多，更多精彩请关注php 其它相关文章！
相关阅读：
html中的label标签使用方法
HTML标题标签元素怎么修改
DIV背景图片background的设置方法
以上就是在HTML里p段落行高行距怎么设置的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。