• 所有问题

    • CSS中如何控制段落间的距离

    注意是段落间的距离，不是行距，不要跟我说是line-height

    举报该问题
    推荐答案   2017-05-10

    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对段落上下间距设置。

    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2012-11-22
    设置P标签的margin，只设置top值,
    第2个回答  2012-07-23
    可以用margin来控制。
    margin-top:10px;
    第3个回答  2012-07-28
    margin或padding都可以，当然，最正宗的还是margin了
    相似回答
    css 和之间的距离远近怎么调整?答：和之间的距离远近可以通过外边距来设置 margin: 10px 5px; /* 设置上下边距10px，左右边距5px*/举个例子 创建HTML元素 我是第一段呀我是第一段。我是第二段呀我是第二段啊我还是第二段。
    CSS怎么修改行距啊答：行内间距通过如下css设置：line-height: 10px;对于不同段落之间的“行间距”，也就是段间距，这个可以设置段落元素的外边距来实现：margin: top right bottom left;示例如下：在HTML代码中给出两段示例文字，默认样式显示如下 我行内的元素，通过css样式line-height来设置行间距。我另起一段了，那么与...
    大家正在搜
    段落和段落之间的距离段落与段落之间的距离怎么调如何取消段落之间的距离段落之间的距离不同怎么办怎样调段落之间的距离怎么改段落之间的距离怎么缩短段落之间的距离word标题和段落之间的距离wps怎么调整段落之间的距离
    相关问题
    CSS中如何控制段落间的距离
    CSS如何控制段落之间的间距？
    在html与css中怎么设置段与段之间的距离
    div+css中怎么控制标题之间的距离
    CSS如何控制数字之间的间距距
    css修改段落间距
    如何在css中控制段落左右整体缩进？
    div里图片和段落之间有个距离怎么解决