如何用CSS代码设置<li>标签内的行距?

html-css011

如何用CSS代码设置<li>标签内的行距?,第1张

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，一个新建html文件，例如：index.html，填充问题基础代码。

2、其次，在index.html中的<style>标签中，输入css样式代码：li{padding-top: 49px}。

3、浏览器运行index.html页面，此时通过css将li标签的行距调整为了49px。

HTML 行间距的设置方法与问题

我们可以用:<p style="line-height:100%">来设定一段文字内的行距.

但我们怎么设定两段文字之间的行距呢? 即

1 <p >一段文字</ p >

2 <p >第二段文字</ p >

之间的行距怎么设定呢?我可以设成单倍间距吗?

另外,line-height:100%是不是就是我们在Word中的单倍行距

段与段距：

1 <p style = "margin:20px" >一段文字</ p >

2 <p style = "margin:20px" >第二段文字</ p >

也可以这样写<font style="line-height:1.5">文字内容</font>,如果设置为1就是单倍行距了，2就是双倍行距。

或<font style="line-height:150%">文字内容</font>，设置为100%就是单倍行距。

用<br></br>就可以空一行了

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}