letter-spacing与word-spacing的区别_html/css_WEB-ITnose

letter-spacing与word-spacing的区别:
l标题中的两个属性的使用频率虽然算不上多,但是也不能说没有用武之地,它们两个由于在外观和作用上都有相似之处,但是也有很大的不同,下面就通过实例简单介绍一下。
实例一:

  1. <span class="pun">蚂蚁部落</span>.first{ letter-spacing:40px;}.second{ word-spacing:40px;}
    I am a good boy
    I am a good boy

登录后复制

由以上的代码表现可以看出,letter-spacing修改的是字母或者字符之间的间距,而word-spacing修改的是字(单词)之间的间距。以上代码中letter-spacing将字母之间的间距设置为40px,需要注意的是,空格也算是一个字符,例如”I”与”am”之间的空格与两边的字母的间距也会设置为40px,所以”I”和”a”之间的间距是80px。word-spacing会将单词之间的间距设置为40px。

特别说明:

letter-spacing与word-spacing准确的说不是设置字母和字之间的间距,而是在指定的字母和字之后添加指定的间距,最后一个字母和字除外。

实例二:

立即学习“前端免费学习笔记(深入)”;

  1. <span class="pun">蚂蚁部落</span>.first{ letter-spacing:40px;}.second { word-spacing:40px;}.third{ word-spacing:40px; }
    蚂蚁部落
    蚂蚁部落
    蚁部落

登录后复制

有以上代码的表现可以看出,对于汉字,如果连在一起则被视作一个“word”。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/517.html

最为原始地址是:http://www.softwhy.com/

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
编程技术

z-index属性值为负数的作用_html/css_WEB-ITnose

2025-3-10 0:26:02

编程技术

Easy way to use JText 2.1.7 and HTML-style template for generating report_html/css_WEB-ITnose

2025-3-10 0:26:11

0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
私信列表
搜索