如何用CSS缩小两个<p><p>之间的距离

html-css05

如何用CSS缩小两个<p><p>之间的距离,第1张

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。所以两个<p></p>之间的距离可以用外边距（margin）来实现：

p{margin:10px 0}  // 设置p标签上下间距为10px，左右为0

实例演示外边距对p标签之间距离的影响：

创建Html元素

<div class="box">

<span>演示外边距对p标签之间距离的影响：</span><br>

<div class="content">

<p>我是第一行</p>

<p>我是第二行</p>

</div>

</div>

设置整体的css样式

div.box{width:300pxpadding:20pxmargin:20pxborder:4px dashed #ccc}

div.box span{color:#999font-style:italic}

div.content{width:250pxmargin:10px 0padding:20pxborder:2px solid #ff6666}

设置p标签的外边距样式

如果外边距设为0

p{margin:0 0}

增大边距为15px

p{margin:15px 0}

CSS代码:

p{margin:14px 0 0 0padding:0text-indent:2emline-height:150%}

margin可以设置P中间间隙，text-indent:2em每个段落缩进2个字符，line-height设置行间距

建议不要用br，用<P>就可以了