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

html-css08

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

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

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

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

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

这是因为你把li设置成行内元素了,行内元素之间是会有一定间隙的,间隙的大小与默认的font-size设置有关,这个值越大,间隙也越大,如果你在ul层设置font-size=0,那么间隙即可去掉,但是如果ul有字体的话,也看不见了,li里面的字体可以另外设置大小。还有一种办法就是连着写代码:

<ul>

    <li>

    </li>

</ul>

这样的写法改成

<ul><li></li></ul>

或者

<ul><

li><

/li></ul>

为什么写在一行之后空隙会不见了呢?我认为原因是浏览器会解析HTML代码中行内元素之间的换行符,当行内元素之间没有换行符之后,间隙自然就没了。

可以使用 letter-spacing:*px来控制文字间距,*px是指间距像素

这个不仅可以用在li里,其它需要文字排版的地方都可以使用

举个例子:

.list li {width:200pxtext-align:centerheight:22pxline-height:22pxletter-spacing:5pxoverflow:hiddenclear:both}

说明.list li {li宽度200px 文字居中 li高度22px 行高22px 字间距5px 超出部份隐藏 清除}