设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > CSS > 正文

用css的letter-spacing属性设置字与字的间距

时间:2015-02-25 22:36:09 来源:村姑网 作者:喜欢安静 阅读:109
导读:今天我们来一起学一下怎么用 css 的 letter-spacing属性 设置字与字之间的 间距 。合理的控制字与字的间距可以比较合理的把文字展现给访客,使文字间看起来更加的有条理,也从另一方面提高了用户体验,而我们要设置字与字的间距只需给css的letter-spacing属...

    今天我们来一起学一下怎么用cssletter-spacing属性设置字与字之间的间距。合理的控制字与字的间距可以比较合理的把文字展现给访客,使文字间看起来更加的有条理,也从另一方面提高了用户体验,而我们要设置字与字的间距只需给css的letter-spacing属性设置你想要的值即可,你可以设置10px,那么字和字之间的距离就会间隔10像素,下面我们就用一个实例来一起学习一下如何使用css设置字间距。

    首先我们先设置不设置字的间距,先来看一下效果,html代码如下:

     <p>
         我没有设置字与字的间距。
     </p>

    在浏览器重运行后的效果如下图所示:

没有设置文字间距的效果图

    通过上图我们可以看出,在没有设置字间距的时候,字和字之间的间距是默认的,此时我们看着文字比较紧凑。下面我们用css的letter-spacing属性来设置一下字与字之间的间距,我们取值为10px,就是说前一个字和下一个字之间的距离是10像素,代码如下:

     <p>
         我设置字与字的间距。
     </p>

    css代码如下:

    p
    {
      letter-spacing:10px;
    }

    在浏览器中运行后的效果如下图所示:

设置字间距为10px后的效果图

    此时,我们看到,在每个字和下一个字中间都会有10像素的间距。所以我们想要设置字与字的间距,只需在css中给letter-spacing设定一个合适的取值即可。

《用css的letter-spacing属性设置字与字的间距》地址:http://www.cunguer.com/article/98.html,本文来自村姑网,您身边的IT专家 www.cunguer.com,转载请注明出处,您的支持是我们创作的源泉~!