CSS中如何控制段落间的距离方法：
1、line-height为20px案例，DIV+CSS代码：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>段落案例</title>
<style>
p{ line-height:20px}
/* css 注释： 设置行高为20px */
</style>
</head>
<body>
<p>第一段，第一行<br />
第二行</p>
<p>第二段</p>
<p>第三段</p>
</body>
</html>
行高line-height实现段落间距
分别设置20px和50px行高样式案例，对比发现不同行高值，段落上下间距也产生不同距离，所以使用line-height可以设置段落间距距离，但这里不推荐使用line-height设置段落之间间距。
二、css padding内补白（内边距）
可以推荐使用padding设置段落上下间距。通过设置上下内补白，内距离即可实现p段落上下间距设置。
关键字：p{padding:10px 0}
接下来DIVCSS5以案例演示CSS段落上下距离设置。
1、设置上下内补白为10px(padding:10px 0)
完整css+div代码：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>段落案例</title>
<style>
p{ padding:10px 0}
/* css注释： 设置padding为上下10px */
</style>
</head>
<body>
<p>第一段，第一行<br />
第二行</p>
<p>第二段</p>
<p>第三段</p>
</body>
</html>
padding段落间距
2、设置上下内补白为30px(padding:30px 0)
div css代码如下：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>段落案例</title>
<style>
p{ padding:30px 0}
/* css注释： 设置padding为上下30px */
</style>
</head>
<body>
<p>第一段，第一行<br />
第二行</p>
<p>第二段</p>
<p>第三段</p>
</body>
</html>
上下padding间距为30px效果
通过对p标签设置padding上下补白即可实现段落之间间距，同时推荐使用padding样式实现段落间距距离设置。
三、css margin外边距
CSS段落间距调整之margin实现上下段落之间间距距离样式设置，我们知道margin是设置上下左右对象与对象之间距离设置，这里段落也可以使用此css样式实现间距。这里DIVCSS5依然以设置两组margin样式进行对比观察。
关键样式单词：p{margin:10px 0}
1、css设置margin上下间距为10px,html+css代码：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>段落案例</title>
<style>
p{margin:10px 0}
/* css注释： 设置margin为对象上下间距10px */
</style>
</head>
<body>
<p>第一段，第一行<br />
第二行</p>
<p>第二段</p>
<p>第三段</p>
</body>
</html>
设置margin段落上下间距为10px
2、css设置margin上下间距为30px，完整代码如下：
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>段落案例</title>
<style>
p{margin:30px 0}
/* css注释： 设置margin为对象上下间距30px */
</style>
</head>
<body>
<p>第一段，第一行<br />
第二行</p>
<p>第二段</p>
<p>第三段</p>
</body>
</html>
设置p标签上下margin间距为30px
观察margin上下间距设置为10px和30px实现了间距调整目的，这里也推荐使用margin对段落上下间距设置。
书写手机网页时，必须约束视口宽度（320-420左右）： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" /> width=device-width 约束视口 initial-scale=1.0 初始视口倍数是1倍 minimum-scale=1.0 最小允许视口宽度是1倍 maximum-scale=1.0 最大允许视口宽度是1倍 user-scalable=no不允许用户缩放视口 书写移动端网页，没有版心，必须用百分比布局。百分比布局也叫流式布局。 一、百分比布局 width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。 height:高度的百分比是相对于父盒子height内容高的比。 padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。 border：不能书写百分数 子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）； height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）； padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）； 例：div{ width: 50%overflow: hidden} p{ width: 50%height: 100pxfloat: leftbackground-color: pink} p:last-child{ background-color: green}二、box-sizing:border-box css2中的盒模型是外扩的。 css3的box-sizing：盒模型内减。（在width、height基础上再书写padding或者border，是在原有宽高上进行内减。） 例： 内减盒模型：书写的width、height就是盒子真正占有的宽和高。 讲真，内减盒模型简直不能再更好用了！！尤其是要自己各种测算的时候！ 三、弹性盒 display的属性值：block ,inline,inline-block,none -webkit-box:弹性盒容器。 例： 书写：3个P，宽度比是1:2:3。（X+2X+3X=100%） 抽象公式： 四、固比固模型 固比固模型：第一部分和第三部分宽度是固定值，第二部分宽度是剩余部分的宽度。 例：1和3部分宽度是120px，2自动撑开。 1、利用浮动 2、绝对定位（推荐） 3、弹性盒 五、max-width 和 min-width 移动端网页宽度必须使用百分比，但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。 例：
