css设置字体间距

html-css015

css设置字体间距,第1张

01

先看下我们的html代码,很简单,就是一个div里有一段文字,我们为这个div添加了一个样式 zn

02

默认情况下,不加任何样式时,这段文字的间距是很小的,如图

03

为了添加文字的间距,我们可以添加letter-spacing的样式,添加一个zn的样式名,样式代码为 letter-spacing: 12px就是每个文字间会有12像素的间距。

04

再运行页面,就可以看到效果了。文字间的间距明显加大了。

如何定义字间距?

在dw3中css的属性定义对话框(style

definition

for

.style1)的“block”上的“letter

spaceing”属性定义的就

是字间距,它指的是每一个字符之间的额外间距,经长度为单位,正负值均可,当取负值时产生字符挤在一起的效果。下

面代码是一个定义好的字间距css例子:

<!--

.style1

{

letter-spacing:

3px}

-->

可以使用

letter-spacing:*px

来控制文字间距,*px是指间距像素

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

举个例子:

.list

li

{width:200px

text-align:center

height:22px

line-height:22px

letter-spacing:5px

overflow:hidden

clear:both}

说明.list

li

{li宽度200px

文字居中

li高度22px

行高22px

字间距5px

超出部份隐藏

清除}