使用软件:   阅读次数:   收录时间:2008-08-28

CSS中的word-spacing(单词间隔)与letter-spacing(字母间隔)

作者:websbook.com整理  来源:52css.com

CSS中的很多属性由于不常用,所以往往被人们忽视,比如word-spacing和letter-spacing,前者是用来定义单词间隔之间的间隔,后者是用来定义字母之间的间隔,由于网页制作HTML时,我们往往对间隔采用浏览器的默认方式,所以对前面两个属性并不常用,不过在精确定义文字间距时(比如我想单词与单词之间的空格宽一点)就最好使用这两个样式属性了,所以下面来详细介绍一下word-spacing和letter-spacing的区别与使用方法

word-spacing属性:

  检索或设置对象中的单词之间插入的空格数。由浮点数字和单位标识符组成的长度值,允许为负值。

在默认情况下:


      提示:您可以先修改部分代码再运行

设置word-spacing为15px的情况:


      提示:您可以先修改部分代码再运行

 我们发现,文字间的间隔并未增加,而词与词之间的间隔变为了15px。

letter-spacing属性:

  检索或设置对象中的文字之间的间隔。
  该属性将指定的间隔添加到每个文字之后,但最后一个字将被排除在外。
  可以调整单词中每个字母(汉字)间的距离。
  普通的字与字之间的间距可以用这个来控制实现。  

在默认情况下:


      提示:您可以先修改部分代码再运行

设置letter-spacing为5px的情况:

 


      提示:您可以先修改部分代码再运行

我们发现,单词间的间隔并未增加,而词与词之间的间隔变为了5px。在实际应用中,注意对这两个属性的区分。

    评论加载中…
教程导航
HTML/CSS热门教程
line-height属性的继承问题
原文: http://www.planabc.net/2008/07/25/unitless-line-heights/ 淘宝商城 的detail 页面产品详情部分是商家自定义区块,曾出现这样一个问题: style type=te...
作者:blank
CSS入门教程
CSS是Cascading Style Sheets的简称,中文翻译为串接样式表,也有人翻译 为样式表。CSS用以作为网页的排版和风格设计,在web标准建站中,对CSS的熟悉和使用 是相...
作者:ddlnfx
解读absolute与relative
作者小毅的博客: http://andymao.com/ 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对...
作者:小毅
CSS内联格式化模式(line-height原
重要提示: 本文并非一篇简单地介绍内联格式模型(inline formatting model)的文章。相反,它是对内联格式(inline formatting)本质规则和过程 的扼要剖析,是...
作者:dudo
HTML5教程:语义性的块级元素与内联
HTML5教程语义性的块级元素 HTML5还增加了一些纯语义性的块级元素: aside figure dialog 我在文章和书中一直使用前两个元素。第三个元素我不经常用,它主要用于...
作者:52css.com